From d6caa6043adef61387ccfece57336593641875c4 Mon Sep 17 00:00:00 2001 From: Marc Englund Date: Thu, 22 Nov 2012 17:09:10 +0200 Subject: [PATCH] Fixes #6714 #10330 - wraps theme in themename{}, creates legacy-styles.css, updates themes to support this. Change-Id: I185b67b2ee74dca2faf48ff2517f24280aff4375 --- .gitignore | 7 ++++- .../VAADIN/themes/base/common/common.scss | 26 ++++++++-------- .../themes/base/dragwrapper/dragwrapper.scss | 16 +++++----- .../VAADIN/themes/base/legacy-styles.scss | 6 ++++ .../VAADIN/themes/base/select/select.scss | 2 +- WebContent/VAADIN/themes/base/styles.scss | 4 ++- WebContent/VAADIN/themes/base/tree/tree.scss | 29 ++++++++--------- .../themes/chameleon/common/common.scss | 12 +++---- .../themes/chameleon/legacy-styles.scss | 6 ++++ .../VAADIN/themes/chameleon/styles.scss | 5 +-- .../VAADIN/themes/liferay/common/common.scss | 2 +- .../VAADIN/themes/liferay/legacy-styles.scss | 6 ++++ .../VAADIN/themes/liferay/select/select.scss | 2 +- WebContent/VAADIN/themes/liferay/styles.scss | 5 +-- .../themes/liferay/textfield/textfield.scss | 8 ++--- .../VAADIN/themes/reindeer-tests/styles.css | 2 +- .../VAADIN/themes/reindeer/common/common.scss | 20 ++++++------ .../VAADIN/themes/reindeer/label/label.scss | 4 +-- .../VAADIN/themes/reindeer/legacy-styles.scss | 6 ++++ .../VAADIN/themes/reindeer/select/select.scss | 6 ++-- WebContent/VAADIN/themes/reindeer/styles.scss | 4 ++- .../themes/reindeer/textfield/textfield.scss | 20 ++++++------ .../VAADIN/themes/runo/common/common.scss | 14 ++++----- .../VAADIN/themes/runo/legacy-styles.scss | 6 ++++ .../VAADIN/themes/runo/select/select.scss | 2 +- WebContent/VAADIN/themes/runo/styles.scss | 4 ++- .../VAADIN/themes/tests-book/styles.css | 2 +- .../VAADIN/themes/tests-components/styles.css | 2 +- .../VAADIN/themes/tests-tickets/styles.css | 2 +- .../com/vaadin/client/ui/ui/UIConnector.java | 2 +- .../com/vaadin/server/BootstrapHandler.java | 2 +- .../com/vaadin/buildhelpers/CompileTheme.java | 31 ++++++++++++++----- 32 files changed, 163 insertions(+), 102 deletions(-) create mode 100644 WebContent/VAADIN/themes/base/legacy-styles.scss create mode 100644 WebContent/VAADIN/themes/chameleon/legacy-styles.scss create mode 100644 WebContent/VAADIN/themes/liferay/legacy-styles.scss create mode 100644 WebContent/VAADIN/themes/reindeer/legacy-styles.scss create mode 100644 WebContent/VAADIN/themes/runo/legacy-styles.scss diff --git a/.gitignore b/.gitignore index fbc7eee0af..d2236fafb0 100644 --- a/.gitignore +++ b/.gitignore @@ -12,15 +12,19 @@ # /WebContent/VAADIN/themes/base/ /WebContent/VAADIN/themes/base/styles.css +/WebContent/VAADIN/themes/base/legacy-styles.css # /WebContent/VAADIN/themes/chameleon/ /WebContent/VAADIN/themes/chameleon/styles.css +/WebContent/VAADIN/themes/chameleon/legacy-styles.css # /WebContent/VAADIN/themes/liferay/ /WebContent/VAADIN/themes/liferay/styles.css +/WebContent/VAADIN/themes/liferay/legacy-styles.css # /WebContent/VAADIN/themes/reindeer/ /WebContent/VAADIN/themes/reindeer/styles.css +/WebContent/VAADIN/themes/reindeer/legacy-styles.css # /WebContent/VAADIN/themes/reindeer/button/img/ /WebContent/VAADIN/themes/reindeer/button/img/*-sprites*.png @@ -30,6 +34,7 @@ # /WebContent/VAADIN/themes/runo/ /WebContent/VAADIN/themes/runo/styles.css +/WebContent/VAADIN/themes/runo/legacy-styles.css # /WebContent/VAADIN/themes/runo/common/img/ /WebContent/VAADIN/themes/runo/common/img/ajax-loader-red.gif @@ -62,4 +67,4 @@ # build result folders */result -result \ No newline at end of file +result diff --git a/WebContent/VAADIN/themes/base/common/common.scss b/WebContent/VAADIN/themes/base/common/common.scss index b1e5ae1674..27a8f56a48 100644 --- a/WebContent/VAADIN/themes/base/common/common.scss +++ b/WebContent/VAADIN/themes/base/common/common.scss @@ -8,18 +8,18 @@ margin: 0; overflow: hidden; } -.v-app { +&.v-app { height: 100%; } /* Force arrow cursor for all elements inside the app */ -.v-app, +&.v-app, .v-window, .v-popupview-popup, .v-label, .v-caption { cursor: default; } -div.v-app-loading { +body &.v-app-loading { /* You can use this to provide indication for the user that the application is loading. */ /* It is applied to the same element as .v-app */ background-image: url(img/loading-indicator.gif); @@ -65,7 +65,7 @@ div.v-app-loading { .v-ui:focus { outline: none; } -.v-app select, +&.v-app select, .v-window select { margin: 0; } @@ -77,10 +77,10 @@ div.v-app-loading { .v-disabled * { cursor: default; } -* html .v-disabled { +* html & .v-disabled { zoom: 1; } -*+html .v-disabled { +*+html & .v-disabled { zoom: 1; } .v-disabled .v-disabled { @@ -217,16 +217,16 @@ div.v-app-loading { font-size: xx-small; } /* Debug style */ -.v-app .invalidlayout, -.v-app .invalidlayout * { +&.v-app .invalidlayout, +&.v-app .invalidlayout * { background: #f99 !important; } /* Fix for Liferay, issue #2384 */ -.v-app input[type="text"], -.v-app input[type="password"], -.v-app input[type="reset"], -.v-app select, -.v-app textarea , +&.v-app input[type="text"], +&.v-app input[type="password"], +&.v-app input[type="reset"], +&.v-app select, +&.v-app textarea , .v-window input[type="text"], .v-window input[type="password"], .v-window input[type="reset"], diff --git a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss index dae4320131..e9bc677b3e 100644 --- a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss +++ b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss @@ -40,7 +40,7 @@ background-color: transparent; padding: 2px; } -.v-app .#{$name}-over-top, +&.v-app .#{$name}-over-top, .v-window .#{$name}-over-top, .v-popupview-popup .#{$name}-over-top { border: none; @@ -52,7 +52,7 @@ -webkit-border-radius: 0; border-radius: 0; } -.v-app .#{$name}-over-bottom, +&.v-app .#{$name}-over-bottom, .v-window .#{$name}-over-bottom, .v-popupview-popup .#{$name}-over-bottom { border: none; @@ -64,7 +64,7 @@ -webkit-border-radius: 0; border-radius: 0; } -.v-app .#{$name}-over-left, +&.v-app .#{$name}-over-left, .v-window .#{$name}-over-left, .v-popupview-popup .#{$name}-over-left { border: none; @@ -76,7 +76,7 @@ -webkit-border-radius: 0; border-radius: 0; } -.v-app .#{$name}-over-right, +&.v-app .#{$name}-over-right, .v-window .#{$name}-over-right, .v-popupview-popup .#{$name}-over-right { border: none; @@ -90,16 +90,16 @@ } .#{$name}, .#{$name}-over, -.v-app .#{$name}-over-top, +&.v-app .#{$name}-over-top, .v-window .#{$name}-over-top, .v-popupview-popup .#{$name}-over-top, -.v-app .#{$name}-over-bottom, +&.v-app .#{$name}-over-bottom, .v-window .#{$name}-over-bottom, .v-popupview-popup .#{$name}-over-bottom, -.v-app .#{$name}-over-left, +&.v-app .#{$name}-over-left, .v-window .#{$name}-over-left, .v-popupview-popup .#{$name}-over-left, -.v-app .#{$name}-over-right, +&.v-app .#{$name}-over-right, .v-window .#{$name}-over-right, .v-popupview-popup .#{$name}-over-right { border-color: rgba(0,109,232,.6); diff --git a/WebContent/VAADIN/themes/base/legacy-styles.scss b/WebContent/VAADIN/themes/base/legacy-styles.scss new file mode 100644 index 0000000000..188fc85d46 --- /dev/null +++ b/WebContent/VAADIN/themes/base/legacy-styles.scss @@ -0,0 +1,6 @@ +@import "base.scss"; +// For legacy themes; does not wrap styles in .themename +// Creates legacy-styles.css that can be imported into non-sass themes. +// NOTE: can not be used in scenarios where multiple themes are used on the +// same page (e.g portals). +@include base; \ No newline at end of file diff --git a/WebContent/VAADIN/themes/base/select/select.scss b/WebContent/VAADIN/themes/base/select/select.scss index 483f0e16b6..8e252e1f60 100644 --- a/WebContent/VAADIN/themes/base/select/select.scss +++ b/WebContent/VAADIN/themes/base/select/select.scss @@ -63,7 +63,7 @@ .v-filterselect .v-icon { float: left; } -.v-app .v-filterselect-input, +&.v-app .v-filterselect-input, .v-window .v-filterselect-input, .v-popupview-popup .v-filterselect-input { margin: 0; diff --git a/WebContent/VAADIN/themes/base/styles.scss b/WebContent/VAADIN/themes/base/styles.scss index 40990f2c31..1b6942944b 100644 --- a/WebContent/VAADIN/themes/base/styles.scss +++ b/WebContent/VAADIN/themes/base/styles.scss @@ -1,2 +1,4 @@ @import "base.scss"; -@include base; +.base { + @include base; +} diff --git a/WebContent/VAADIN/themes/base/tree/tree.scss b/WebContent/VAADIN/themes/base/tree/tree.scss index 2eb2c5908b..fd998eac45 100644 --- a/WebContent/VAADIN/themes/base/tree/tree.scss +++ b/WebContent/VAADIN/themes/base/tree/tree.scss @@ -99,43 +99,44 @@ div.#{$name}-node-leaf { } // tree-connectors.css +// This could be (and was) wrapped in a nested block instead of prefixing each +// row, but #10309 prevents us from doing that right now. -.#{$name}-connectors { // Make item caption height an even number (so that the connector dots overlap nicely) - .#{$name}-node-caption { + .#{$name}-connectors .#{$name}-node-caption { padding-top: 1px; } - .#{$name}-node { + .#{$name}-connectors .#{$name}-node { background: transparent url(img/connector-expand.png) no-repeat 2px -52px; } - .#{$name}-node-expanded { + .#{$name}-connectors .#{$name}-node-expanded { background: transparent url(img/connector-collapse.png) no-repeat 2px -52px; } - .#{$name}-node-last { + .#{$name}-connectors .#{$name}-node-last { background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px; } - .#{$name}-node-expanded.#{$name}-node-last { + .#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-last { background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px; } - .#{$name}-node-leaf { + .#{$name}-connectors .#{$name}-node-leaf { background: transparent url(img/connector-leaf.png) repeat-y 2px 50%; } - .#{$name}-node-leaf-last { + .#{$name}-connectors .#{$name}-node-leaf-last { background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%; } - .#{$name}-node-children { + .#{$name}-connectors .#{$name}-node-children { background: transparent url(img/connector.png) repeat-y 2px 0; } - .#{$name}-node-children-last { + .#{$name}-connectors .#{$name}-node-children-last { background: transparent; } - .#{$name}-node-drag-top, - .#{$name}-node-expanded.#{$name}-node-drag-top { + .#{$name}-connectors .#{$name}-node-drag-top, + .#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-drag-top { background-position: 2px -53px; } - .#{$name}-node-drag-top.#{$name}-node-leaf { + .#{$name}-connectors .#{$name}-node-drag-top.#{$name}-node-leaf { background-position: 2px 50%; } -} + } \ No newline at end of file diff --git a/WebContent/VAADIN/themes/chameleon/common/common.scss b/WebContent/VAADIN/themes/chameleon/common/common.scss index 10247032ac..a38ed62eb9 100644 --- a/WebContent/VAADIN/themes/chameleon/common/common.scss +++ b/WebContent/VAADIN/themes/chameleon/common/common.scss @@ -10,7 +10,7 @@ $chameleon-line-height: 1.4; // rules on the application level, above theme selection @mixin chameleon-app { // App background & tooltip - .v-app { + &.v-app { background: transparent; overflow: hidden; } @@ -48,14 +48,14 @@ $chameleon-line-height: 1.4; // Then come all other overlay elements, that do not have other arbitrary // components inside them (from v-filterselect-suggestpopup onwards) - .v-app, + &.v-app, .v-window, .v-popupview-popup, .v-tooltip, - .v-app input, - .v-app select, - .v-app button, - .v-app textarea, + &.v-app input, + &.v-app select, + &.v-app button, + &.v-app textarea, .v-window input, .v-window select, .v-window button, diff --git a/WebContent/VAADIN/themes/chameleon/legacy-styles.scss b/WebContent/VAADIN/themes/chameleon/legacy-styles.scss new file mode 100644 index 0000000000..843f81475c --- /dev/null +++ b/WebContent/VAADIN/themes/chameleon/legacy-styles.scss @@ -0,0 +1,6 @@ +@import "chameleon.scss"; +// For legacy themes; does not wrap styles in .themename +// Creates legacy-styles.css that can be imported into non-sass themes. +// NOTE: can not be used in scenarios where multiple themes are used on the +// same page (e.g portals). +@include chameleon; diff --git a/WebContent/VAADIN/themes/chameleon/styles.scss b/WebContent/VAADIN/themes/chameleon/styles.scss index de7e306e20..0c55a57239 100644 --- a/WebContent/VAADIN/themes/chameleon/styles.scss +++ b/WebContent/VAADIN/themes/chameleon/styles.scss @@ -1,3 +1,4 @@ @import "chameleon.scss"; - -@include chameleon; +.chameleon { + @include chameleon; +} \ No newline at end of file diff --git a/WebContent/VAADIN/themes/liferay/common/common.scss b/WebContent/VAADIN/themes/liferay/common/common.scss index a94431d4cb..0d653baf7c 100644 --- a/WebContent/VAADIN/themes/liferay/common/common.scss +++ b/WebContent/VAADIN/themes/liferay/common/common.scss @@ -1,6 +1,6 @@ @mixin liferay-common { -div.v-app { +body &.v-app { background-color: transparent; } diff --git a/WebContent/VAADIN/themes/liferay/legacy-styles.scss b/WebContent/VAADIN/themes/liferay/legacy-styles.scss new file mode 100644 index 0000000000..4f304fd397 --- /dev/null +++ b/WebContent/VAADIN/themes/liferay/legacy-styles.scss @@ -0,0 +1,6 @@ +@import "liferay.scss"; +// For legacy themes; does not wrap styles in .themename +// Creates legacy-styles.css that can be imported into non-sass themes. +// NOTE: can not be used in scenarios where multiple themes are used on the +// same page (e.g portals). +@include liferay; \ No newline at end of file diff --git a/WebContent/VAADIN/themes/liferay/select/select.scss b/WebContent/VAADIN/themes/liferay/select/select.scss index 3dbeaeab9d..d62bb43242 100644 --- a/WebContent/VAADIN/themes/liferay/select/select.scss +++ b/WebContent/VAADIN/themes/liferay/select/select.scss @@ -1,6 +1,6 @@ @mixin liferay-select { -.v-app select, +&.v-app select, .v-window select { padding: 1px; } diff --git a/WebContent/VAADIN/themes/liferay/styles.scss b/WebContent/VAADIN/themes/liferay/styles.scss index 030602a8b6..b76e5f756b 100644 --- a/WebContent/VAADIN/themes/liferay/styles.scss +++ b/WebContent/VAADIN/themes/liferay/styles.scss @@ -1,3 +1,4 @@ @import "liferay.scss"; - -@include liferay; +.liferay { + @include liferay; +} \ No newline at end of file diff --git a/WebContent/VAADIN/themes/liferay/textfield/textfield.scss b/WebContent/VAADIN/themes/liferay/textfield/textfield.scss index 9e3d2ece03..a260156bc8 100644 --- a/WebContent/VAADIN/themes/liferay/textfield/textfield.scss +++ b/WebContent/VAADIN/themes/liferay/textfield/textfield.scss @@ -1,9 +1,9 @@ @mixin liferay-textfield { -.v-app input[type="text"], -.v-app input[type="password"], -.v-app input[type="reset"], -.v-app textarea , +&.v-app input[type="text"], +&.v-app input[type="password"], +&.v-app input[type="reset"], +&.v-app textarea , .v-window input[type="text"], .v-window input[type="password"], .v-window input[type="reset"], diff --git a/WebContent/VAADIN/themes/reindeer-tests/styles.css b/WebContent/VAADIN/themes/reindeer-tests/styles.css index 7da9e50a46..679de01b9c 100644 --- a/WebContent/VAADIN/themes/reindeer-tests/styles.css +++ b/WebContent/VAADIN/themes/reindeer-tests/styles.css @@ -1,4 +1,4 @@ -@import url(../reindeer/styles.css); +@import url(../reindeer/legacy-styles.css); .table-equal-rowheight .v-table-row {height: 30px;} .table-equal-rowheight .v-table-row-odd {height: 30px;} diff --git a/WebContent/VAADIN/themes/reindeer/common/common.scss b/WebContent/VAADIN/themes/reindeer/common/common.scss index 10e8e18e4c..821f041789 100644 --- a/WebContent/VAADIN/themes/reindeer/common/common.scss +++ b/WebContent/VAADIN/themes/reindeer/common/common.scss @@ -1,18 +1,18 @@ @mixin reindeer-common { .v-generated-body, -.v-app { +&.v-app { background: #f5f5f5; } /* Global font styles */ -.v-app, +&.v-app, .v-window, .v-popupview-popup, .v-tooltip, -.v-app input, -.v-app select, -.v-app button, -.v-app textarea, +&.v-app input, +&.v-app select, +&.v-app button, +&.v-app textarea, .v-window input, .v-window select, .v-window button, @@ -34,7 +34,7 @@ color: #222; } /* Fonts on black background */ -.v-app .black, +&.v-app .black, .v-window-black, .v-window .black, .v-popupview-popup .black { @@ -110,13 +110,13 @@ } /* Fixes for Liferay 6.0 */ -.portlet .v-app { +.portlet &.v-app { background: transparent; } -.portlet .v-app .v-radiobutton input, +.portlet &.v-app .v-radiobutton input, .portlet .v-window .v-radiobutton input, .portlet .v-popupview-popup .v-radiobutton input, -.portlet .v-app .v-checkbox input, +.portlet &.v-app .v-checkbox input, .portlet .v-window .v-checkbox input, .portlet .v-popupview-popup .v-checkbox input { margin-right: 3px; diff --git a/WebContent/VAADIN/themes/reindeer/label/label.scss b/WebContent/VAADIN/themes/reindeer/label/label.scss index 24337e2ff5..44abf64e36 100644 --- a/WebContent/VAADIN/themes/reindeer/label/label.scss +++ b/WebContent/VAADIN/themes/reindeer/label/label.scss @@ -41,9 +41,9 @@ /********************** * Blue styles **********************/ -.v-app .white, +&.v-app .white, .v-window .white, -.v-app .blue, +&.v-app .blue, .v-window .blue { color: #222; text-shadow: none; diff --git a/WebContent/VAADIN/themes/reindeer/legacy-styles.scss b/WebContent/VAADIN/themes/reindeer/legacy-styles.scss new file mode 100644 index 0000000000..6c59b887d8 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/legacy-styles.scss @@ -0,0 +1,6 @@ +@import "reindeer.scss"; +// For legacy themes; does not wrap styles in .themename +// Creates legacy-styles.css that can be imported into non-sass themes. +// NOTE: can not be used in scenarios where multiple themes are used on the +// same page (e.g portals). +@include reindeer; \ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/select/select.scss b/WebContent/VAADIN/themes/reindeer/select/select.scss index 1510896fb9..3ab415f813 100644 --- a/WebContent/VAADIN/themes/reindeer/select/select.scss +++ b/WebContent/VAADIN/themes/reindeer/select/select.scss @@ -7,7 +7,7 @@ padding-left: 2px; padding-right: 25px; /* Space for the button */ } -.v-app .#{$name}-input, +&.v-app .#{$name}-input, .v-window .#{$name}-input, .v-popupview-popup .#{$name}-input { background: transparent repeat-x; @@ -16,7 +16,7 @@ height: 24px; } /* More specific selector to override padding */ -.v-app input.#{$name}-input, +&.v-app input.#{$name}-input, .v-window input.#{$name}-input, .v-popupview-popup input.#{$name}-input { padding: 4px 0 4px 2px; @@ -211,7 +211,7 @@ .black .#{$name} { background-image: url(img/black/left-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.v-app .black .#{$name}-input, +&.v-app .black .#{$name}-input, .v-window .black .#{$name}-input, .v-window-black .#{$name}-input, .v-popupview-popup .black .#{$name}-input { diff --git a/WebContent/VAADIN/themes/reindeer/styles.scss b/WebContent/VAADIN/themes/reindeer/styles.scss index 7ae66252de..89ddb29341 100644 --- a/WebContent/VAADIN/themes/reindeer/styles.scss +++ b/WebContent/VAADIN/themes/reindeer/styles.scss @@ -1,3 +1,5 @@ @import "reindeer.scss"; -@include reindeer; +.reindeer { + @include reindeer; +} \ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss index 7cd8166aa6..6c3d4000fa 100644 --- a/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss +++ b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss @@ -31,20 +31,20 @@ height: auto; } /* Need more specific selector because of #2384 fixes in base/common/common.css */ -.v-app input.#{$name}, +&.v-app input.#{$name}, .v-window input.#{$name}, -.v-app textarea.v-textarea, +&.v-app textarea.v-textarea, .v-window textarea.v-textarea { padding: 3px 3px 4px; } -.v-app input.#{$name}.v-widget, +&.v-app input.#{$name}.v-widget, .v-window input.#{$name}.v-widget { height: 24px; } -.v-app .#{$name}-focus, +&.v-app .#{$name}-focus, .v-window .#{$name}-focus, .v-popupview-popup .#{$name}-focus, -.v-app .v-textarea-focus, +&.v-app .v-textarea-focus, .v-window .v-textarea-focus, .v-popupview-popup .v-textarea-focus { border-color: #5b97d0; @@ -59,16 +59,16 @@ textarea.v-textarea-prompt { color: #999; } /* Small style textfield */ -.v-app input.#{$name}-small { +&.v-app input.#{$name}-small { font-size: 11px; line-height: normal; height: auto; padding: 2px; } -.v-app textarea.v-textarea-small { +&.v-app textarea.v-textarea-small { font-size: 11px; } -.v-app .v-table input.#{$name}.v-widget, +&.v-app .v-table input.#{$name}.v-widget, .v-window .v-table input.#{$name}.v-widget { padding: 1px 2px; height: auto; @@ -92,11 +92,11 @@ textarea.v-textarea-prompt { .black .v-textarea { background-image: none; } -.v-app .black .#{$name}-focus, +&.v-app .black .#{$name}-focus, .v-window-black .#{$name}-focus, .v-window .black .#{$name}-focus, .v-popupview-popup .black .#{$name}-focus, -.v-app .black .v-textarea-focus, +&.v-app .black .v-textarea-focus, .v-window-black .v-textarea-focus, .v-window .black .v-textarea-focus, .v-popupview-popup .black .v-textarea-focus { diff --git a/WebContent/VAADIN/themes/runo/common/common.scss b/WebContent/VAADIN/themes/runo/common/common.scss index 41ab6dae88..be39a1287a 100644 --- a/WebContent/VAADIN/themes/runo/common/common.scss +++ b/WebContent/VAADIN/themes/runo/common/common.scss @@ -3,7 +3,7 @@ .v-generated-body { background: #e9eced; } -.v-app { +&.v-app { 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; @@ -11,14 +11,14 @@ line-height: 18px; } /* Global font styles */ -.v-app, +&.v-app, .v-window, .v-popupview-popup, .v-tooltip, -.v-app input, -.v-app select, -.v-app button, -.v-app textarea, +&.v-app input, +&.v-app select, +&.v-app button, +&.v-app textarea, .v-window input, .v-window select, .v-window button, @@ -37,7 +37,7 @@ color: #464f52; font-size: 13px; } -.v-app select, +&.v-app select, .v-window select { padding: 0; } diff --git a/WebContent/VAADIN/themes/runo/legacy-styles.scss b/WebContent/VAADIN/themes/runo/legacy-styles.scss new file mode 100644 index 0000000000..29ccb22aa5 --- /dev/null +++ b/WebContent/VAADIN/themes/runo/legacy-styles.scss @@ -0,0 +1,6 @@ +@import "runo.scss"; +// For legacy themes; does not wrap styles in .themename +// Creates legacy-styles.css that can be imported into non-sass themes. +// NOTE: can not be used in scenarios where multiple themes are used on the +// same page (e.g portals). +@include runo; \ No newline at end of file diff --git a/WebContent/VAADIN/themes/runo/select/select.scss b/WebContent/VAADIN/themes/runo/select/select.scss index e043f143e3..64188eed09 100644 --- a/WebContent/VAADIN/themes/runo/select/select.scss +++ b/WebContent/VAADIN/themes/runo/select/select.scss @@ -19,7 +19,7 @@ background: transparent url(img/bg-left-filter.png) no-repeat; padding-left: 4px; } -.v-app .v-filterselect .v-filterselect-input, +&.v-app .v-filterselect .v-filterselect-input, .v-window .v-filterselect .v-filterselect-input, .v-popupview-popup .v-filterselect .v-filterselect-input { background: transparent url(img/bg-center-filter.png) no-repeat 1px 0; diff --git a/WebContent/VAADIN/themes/runo/styles.scss b/WebContent/VAADIN/themes/runo/styles.scss index 987b1425b6..cfcb8bfa78 100644 --- a/WebContent/VAADIN/themes/runo/styles.scss +++ b/WebContent/VAADIN/themes/runo/styles.scss @@ -1,2 +1,4 @@ @import "runo.scss"; -@include runo; \ No newline at end of file +.runo { + @include runo; +} \ No newline at end of file diff --git a/WebContent/VAADIN/themes/tests-book/styles.css b/WebContent/VAADIN/themes/tests-book/styles.css index aef1fb9d29..02669ae3db 100644 --- a/WebContent/VAADIN/themes/tests-book/styles.css +++ b/WebContent/VAADIN/themes/tests-book/styles.css @@ -1,4 +1,4 @@ -@import url(../runo/styles.css); +@import url(../runo/legacy-styles.css); /*****************************************************************************/ /* Styling for tests.magi application. */ diff --git a/WebContent/VAADIN/themes/tests-components/styles.css b/WebContent/VAADIN/themes/tests-components/styles.css index 2d54a48124..5b41f1824f 100644 --- a/WebContent/VAADIN/themes/tests-components/styles.css +++ b/WebContent/VAADIN/themes/tests-components/styles.css @@ -1,4 +1,4 @@ -@import url(../reindeer/styles.css); +@import url(../reindeer/legacy-styles.css); .missing { color: red; diff --git a/WebContent/VAADIN/themes/tests-tickets/styles.css b/WebContent/VAADIN/themes/tests-tickets/styles.css index fd4db4e6b5..2bd6536e49 100644 --- a/WebContent/VAADIN/themes/tests-tickets/styles.css +++ b/WebContent/VAADIN/themes/tests-tickets/styles.css @@ -1,4 +1,4 @@ -@import url(../runo/styles.css); +@import url(../runo/legacy-styles.css); /* DO NOT ADD GENERIC RULES LIKE .v-table IN THIS FILE */ diff --git a/client/src/com/vaadin/client/ui/ui/UIConnector.java b/client/src/com/vaadin/client/ui/ui/UIConnector.java index 588fb5c5cf..1d2c830ea6 100644 --- a/client/src/com/vaadin/client/ui/ui/UIConnector.java +++ b/client/src/com/vaadin/client/ui/ui/UIConnector.java @@ -303,7 +303,7 @@ public class UIConnector extends AbstractSingleComponentContainerConnector .getThemeName(); // Remove chars that are not suitable for style names themeName = themeName.replaceAll("[^a-zA-Z0-9]", ""); - root.addStyleName("v-theme-" + themeName); + root.addStyleName(themeName); root.add(getWidget()); diff --git a/server/src/com/vaadin/server/BootstrapHandler.java b/server/src/com/vaadin/server/BootstrapHandler.java index cfe15f9d37..0169c09ae9 100644 --- a/server/src/com/vaadin/server/BootstrapHandler.java +++ b/server/src/com/vaadin/server/BootstrapHandler.java @@ -314,7 +314,7 @@ public abstract class BootstrapHandler implements RequestHandler { * .v-app-loading * .v-app- *- Additionally added from javascript: - * .v-theme- + * */ List fragmentNodes = context.getBootstrapResponse() diff --git a/theme-compiler/src/com/vaadin/buildhelpers/CompileTheme.java b/theme-compiler/src/com/vaadin/buildhelpers/CompileTheme.java index 47c519d09e..afef575a7f 100644 --- a/theme-compiler/src/com/vaadin/buildhelpers/CompileTheme.java +++ b/theme-compiler/src/com/vaadin/buildhelpers/CompileTheme.java @@ -45,17 +45,31 @@ public class CompileTheme { String themeFolder = params.getOptionValue("theme-folder"); String themeVersion = params.getOptionValue("theme-version"); + // Regular theme try { - processSassTheme(themeFolder, themeName, themeVersion); - System.out.println("Compiling theme " + themeName + " successful"); + processSassTheme(themeFolder, themeName, "styles", themeVersion); + System.out.println("Compiling theme " + themeName + + " styles successful"); } catch (Exception e) { - System.err.println("Compiling theme " + themeName + " failed"); + System.err.println("Compiling theme " + themeName + + " styles failed"); + e.printStackTrace(); + } + // Legacy theme w/o .themename{} wrapping + try { + processSassTheme(themeFolder, themeName, "legacy-styles", + themeVersion); + System.out.println("Compiling theme " + themeName + + " legacy-styles successful"); + } catch (Exception e) { + System.err.println("Compiling theme " + themeName + + " legacy-styles failed"); e.printStackTrace(); } } private static void processSassTheme(String themeFolder, String themeName, - String version) throws Exception { + String variant, String version) throws Exception { StringBuffer cssHeader = new StringBuffer(); @@ -66,10 +80,12 @@ public class CompileTheme { String stylesCssDir = themeFolder + File.separator + themeName + File.separator; - String stylesCssName = stylesCssDir + "styles.css"; + + String stylesCssName = stylesCssDir + variant + ".css"; // Process as SASS file - String sassFile = stylesCssDir + "styles.scss"; + String sassFile = stylesCssDir + variant + ".scss"; + ScssStylesheet scss = ScssStylesheet.get(sassFile); if (scss == null) { throw new IllegalArgumentException("SASS file: " + sassFile @@ -87,7 +103,7 @@ public class CompileTheme { createSprites(themeFolder, themeName); File oldCss = new File(stylesCssName); - File newCss = new File(stylesCssDir + "styles-sprite.css"); + File newCss = new File(stylesCssDir + variant + "-sprite.css"); if (newCss.exists()) { // Theme contained sprites. Renamed "styles-sprite.css" -> @@ -100,6 +116,7 @@ public class CompileTheme { + " failed"); } } + } private static void createSprites(String themeFolder, String themeName) -- 2.39.5