# /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
# /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
# build result folders
*/result
-result
\ No newline at end of file
+result
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);
.v-ui:focus {
outline: none;
}
-.v-app select,
+&.v-app select,
.v-window select {
margin: 0;
}
.v-disabled * {
cursor: default;
}
-* html .v-disabled {
+* html & .v-disabled {
zoom: 1;
}
-*+html .v-disabled {
+*+html & .v-disabled {
zoom: 1;
}
.v-disabled .v-disabled {
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"],
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;
-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;
-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;
-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;
}
.#{$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);
--- /dev/null
+@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
.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;
@import "base.scss";
-@include base;
+.base {
+ @include base;
+}
}
// 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
// rules on the application level, above theme selection
@mixin chameleon-app {
// App background & tooltip
- .v-app {
+ &.v-app {
background: transparent;
overflow: hidden;
}
// 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,
--- /dev/null
+@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;
@import "chameleon.scss";
-
-@include chameleon;
+.chameleon {
+ @include chameleon;
+}
\ No newline at end of file
@mixin liferay-common {
-div.v-app {
+body &.v-app {
background-color: transparent;
}
--- /dev/null
+@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
@mixin liferay-select {
-.v-app select,
+&.v-app select,
.v-window select {
padding: 1px;
}
@import "liferay.scss";
-
-@include liferay;
+.liferay {
+ @include liferay;
+}
\ No newline at end of file
@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"],
-@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;}
@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,
color: #222;
}
/* Fonts on black background */
-.v-app .black,
+&.v-app .black,
.v-window-black,
.v-window .black,
.v-popupview-popup .black {
}
/* 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;
/**********************
* 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;
--- /dev/null
+@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
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;
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;
.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 {
@import "reindeer.scss";
-@include reindeer;
+.reindeer {
+ @include reindeer;
+}
\ No newline at end of file
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;
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;
.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 {
.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;
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,
color: #464f52;
font-size: 13px;
}
-.v-app select,
+&.v-app select,
.v-window select {
padding: 0;
}
--- /dev/null
+@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
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;
@import "runo.scss";
-@include runo;
\ No newline at end of file
+.runo {
+ @include runo;
+}
\ No newline at end of file
-@import url(../runo/styles.css);
+@import url(../runo/legacy-styles.css);
/*****************************************************************************/
/* Styling for tests.magi application. */
-@import url(../reindeer/styles.css);
+@import url(../reindeer/legacy-styles.css);
.missing {
color: red;
-@import url(../runo/styles.css);
+@import url(../runo/legacy-styles.css);
/* DO NOT ADD GENERIC RULES LIKE .v-table IN THIS FILE */
.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());
* .v-app-loading
* .v-app-<simpleName for app class>
*- Additionally added from javascript:
- * .v-theme-<themeName, remove non-alphanum>
+ * <themeName, remove non-alphanum>
*/
List<Node> fragmentNodes = context.getBootstrapResponse()
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();
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
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" ->
+ " failed");
}
}
+
}
private static void createSprites(String themeFolder, String themeName)
projects / vaadin-framework.git / commitdiff