From 0d0c890068af2e31ad002f14caf6eeed0f2f0bb6 Mon Sep 17 00:00:00 2001 From: kubawolanin Date: Fri, 25 Aug 2017 20:34:00 +0200 Subject: [PATCH] Basic UI styling changed to SASS + initial theming support Basic UI with theme support Better fallback for variables - BasicUI Theme Removed color themes - Default and Dark themes left Signed-off-by: kubawolanin --- .../CONTRIBUTING.md | 2 +- .../ESH-INF/config/config.xml | 9 + .../gulpfile.js | 8 +- .../package.json | 2 +- .../snippets/main.html | 4 +- .../snippets/main_static.html | 4 +- .../ui/basic/internal/WebAppConfig.java | 16 +- .../basic/internal/render/PageRenderer.java | 1 + .../web-src/{smarthome.less => _layout.scss} | 374 ++++++------------ .../web-src/_mixins.scss | 63 +++ .../web-src/_theming.scss | 56 +++ .../web-src/_variables.scss | 15 + .../web-src/smarthome.scss | 10 + 13 files changed, 303 insertions(+), 261 deletions(-) rename extensions/ui/org.eclipse.smarthome.ui.basic/web-src/{smarthome.less => _layout.scss} (51%) create mode 100644 extensions/ui/org.eclipse.smarthome.ui.basic/web-src/_mixins.scss create mode 100644 extensions/ui/org.eclipse.smarthome.ui.basic/web-src/_theming.scss create mode 100644 extensions/ui/org.eclipse.smarthome.ui.basic/web-src/_variables.scss create mode 100644 extensions/ui/org.eclipse.smarthome.ui.basic/web-src/smarthome.scss diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/CONTRIBUTING.md b/extensions/ui/org.eclipse.smarthome.ui.basic/CONTRIBUTING.md index 2fc1a909d79..bdd42230130 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.basic/CONTRIBUTING.md +++ b/extensions/ui/org.eclipse.smarthome.ui.basic/CONTRIBUTING.md @@ -1,6 +1,6 @@ ## Contributing -Javascript linting, compressing and LESS compilation is handled through Grunt. Therefore, please run `grunt` instead of changing compressed CSS/JS manually. Default Grunt task will also check the code using ESLint. +Javascript linting, compressing and LESS compilation is handled through Gulp. Therefore, please run `gulp` instead of changing compressed CSS/JS manually. Default Gulp task will also check the code using ESLint. Installing build dependencies: diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/ESH-INF/config/config.xml b/extensions/ui/org.eclipse.smarthome.ui.basic/ESH-INF/config/config.xml index 48979a73b75..5b85f675561 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.basic/ESH-INF/config/config.xml +++ b/extensions/ui/org.eclipse.smarthome.ui.basic/ESH-INF/config/config.xml @@ -5,6 +5,15 @@ http://eclipse.org/smarthome/schemas/config-description-1.0.0.xsd"> + + + Defines the UI theme. + + + + + default + Defines whether bitmap or vector icons are used by the UI. diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/gulpfile.js b/extensions/ui/org.eclipse.smarthome.ui.basic/gulpfile.js index aa905588451..991490fa14e 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.basic/gulpfile.js +++ b/extensions/ui/org.eclipse.smarthome.ui.basic/gulpfile.js @@ -3,19 +3,19 @@ var gulp = require("gulp"), - less = require("gulp-less"), + sass = require("gulp-sass"), uglify = require("gulp-uglify"), eslint = require("gulp-eslint"); var sources = { js: "web-src/smarthome.js", - less: "web-src/smarthome.less" + sass: "web-src/smarthome.scss" }; gulp.task("css", function() { - return gulp.src(sources.less) - .pipe(less({ compress: true })) + return gulp.src(sources.sass) + .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) .pipe(gulp.dest("web")); }); diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/package.json b/extensions/ui/org.eclipse.smarthome.ui.basic/package.json index e4214d8ce89..6aeda39fe6b 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.basic/package.json +++ b/extensions/ui/org.eclipse.smarthome.ui.basic/package.json @@ -8,7 +8,7 @@ "dependencies": { "gulp": "^3.9.0", "gulp-eslint": "^4.0.0", - "gulp-less": "^3.3.2", + "gulp-sass": "^3.1.0", "gulp-uglify": "^1.5.1" } } diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/snippets/main.html b/extensions/ui/org.eclipse.smarthome.ui.basic/snippets/main.html index 99e40409bff..51d28897802 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.basic/snippets/main.html +++ b/extensions/ui/org.eclipse.smarthome.ui.basic/snippets/main.html @@ -61,7 +61,7 @@ - +
@@ -78,7 +78,7 @@
-
+
%children%
diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/snippets/main_static.html b/extensions/ui/org.eclipse.smarthome.ui.basic/snippets/main_static.html index 4f843f040b7..4cd47f367a5 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.basic/snippets/main_static.html +++ b/extensions/ui/org.eclipse.smarthome.ui.basic/snippets/main_static.html @@ -23,7 +23,7 @@ - +
@@ -35,7 +35,7 @@
-
+
%content%
diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/src/main/java/org/eclipse/smarthome/ui/basic/internal/WebAppConfig.java b/extensions/ui/org.eclipse.smarthome.ui.basic/src/main/java/org/eclipse/smarthome/ui/basic/internal/WebAppConfig.java index 296c66bc19c..26f4aa794fd 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.basic/src/main/java/org/eclipse/smarthome/ui/basic/internal/WebAppConfig.java +++ b/extensions/ui/org.eclipse.smarthome.ui.basic/src/main/java/org/eclipse/smarthome/ui/basic/internal/WebAppConfig.java @@ -21,9 +21,11 @@ public class WebAppConfig { private final static String DEFAULT_SITEMAP = "default"; private final static String DEFAULT_ICON_TYPE = "png"; + private final static String DEFAULT_THEME = "default"; private String defaultSitemap = DEFAULT_SITEMAP; private String iconType = DEFAULT_ICON_TYPE; + private String theme = DEFAULT_THEME; private List cssClassList = new ArrayList(); @@ -61,8 +63,9 @@ private void applyCssClasses(Map configProps) { } public void applyConfig(Map configProps) { - String configIconType = (String) configProps.get("iconType"); String configDefaultSitemap = (String) configProps.get("defaultSitemap"); + String configIconType = (String) configProps.get("iconType"); + String configTheme = (String) configProps.get("theme"); if (configDefaultSitemap == null) { configDefaultSitemap = DEFAULT_SITEMAP; @@ -74,8 +77,13 @@ public void applyConfig(Map configProps) { configIconType = DEFAULT_ICON_TYPE; } - iconType = configIconType; + if (configTheme == null) { + configTheme = DEFAULT_THEME; + } + defaultSitemap = configDefaultSitemap; + iconType = configIconType; + theme = configTheme; applyCssClasses(configProps); } @@ -88,6 +96,10 @@ public String getIconType() { return iconType; } + public String getTheme() { + return theme; + } + public String getCssClassList() { String result = " "; for (String item : cssClassList) { diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/src/main/java/org/eclipse/smarthome/ui/basic/internal/render/PageRenderer.java b/extensions/ui/org.eclipse.smarthome.ui.basic/src/main/java/org/eclipse/smarthome/ui/basic/internal/render/PageRenderer.java index 498072d693c..4138e7090a2 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.basic/src/main/java/org/eclipse/smarthome/ui/basic/internal/render/PageRenderer.java +++ b/extensions/ui/org.eclipse.smarthome.ui.basic/src/main/java/org/eclipse/smarthome/ui/basic/internal/render/PageRenderer.java @@ -82,6 +82,7 @@ public StringBuilder processPage(String id, String sitemap, String label, EList< snippet = StringUtils.replace(snippet, "%sitemap%", sitemap); snippet = StringUtils.replace(snippet, "%htmlclass%", config.getCssClassList()); snippet = StringUtils.replace(snippet, "%icon_type%", config.getIconType()); + snippet = StringUtils.replace(snippet, "%theme%", config.getTheme()); String[] parts = snippet.split("%children%"); diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/smarthome.less b/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/_layout.scss similarity index 51% rename from extensions/ui/org.eclipse.smarthome.ui.basic/web-src/smarthome.less rename to extensions/ui/org.eclipse.smarthome.ui.basic/web-src/_layout.scss index cb7ffcc47db..30e850c669b 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/smarthome.less +++ b/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/_layout.scss @@ -1,120 +1,23 @@ -/** - * Eclipse Smarthome BasicUI stylesheet - * - * @author Vlad Ivanov — initial version - */ - -@layout-header-button-desktop-size: 48px; -@layout-header-button-mobile-size: 32px; - -@layout-desktop-size-threshold: 1024px; -@layout-tablet-size-threshold: 850px; -@layout-mobile-size-threshold: 440px; - -@form-row-mobile-height: 52px; -@form-row-desktop-height: 48px; - -@form-row-desktop-height-condensed: 36px; -@form-row-mobile-height-condensed: 40px; - -@form-row-desktop-padding: 16px; -@form-row-mobile-padding: 12px; - -@form-row-desktop-padding-condensed: 10px; -@form-row-mobile-padding-condensed: 4px; - -@mdl-grid-spacing: 8px; - -@item-separator-color: lighten(black, 80); - -.user-select (@val) { - -webkit-user-select: @val; - -moz-user-select: @val; - -ms-user-select: @val; - user-select: @val; -} - -.flex-display(@display: flex) { - display: ~"-webkit-@{display}"; - display: ~"-moz-@{display}"; - display: ~"-ms-@{display}box"; - display: ~"-ms-@{display}"; - display: @display; -} - -.flex-grow(@grow: 0) { - -webkit-flex-grow: @grow; - -moz-flex-grow: @grow; - -ms-flex-grow: @grow; - flex-grow: @grow; -} - -.flex-shrink(@shrink: 1) { - -webkit-flex-shrink: @shrink; - -moz-flex-shrink: @shrink; - -ms-flex-shrink: @shrink; - flex-shrink: @shrink; -} - -.flex-wrap(@wrap) { - flex-wrap: @wrap; - -webkit-flex-wrap: @wrap; -} - -.align-items(@align) { - -webkit-align-items: @align; - -moz-align-items: @align; - -ms-align-items: @align; - align-items: @align; -} - -.align-items-2011(@align) { - -ms-flex-align: @align; - flex-align: @align; -} - -.justify-content(@param) { - -webkit-justify-content: @param; - -ms-justify-content: @param; - justify-content: @param; -} - -.flex-2011(@flex) { - -ms-flex: @flex; - flex: @flex; -} - -.expand() { - top: 0; - left: 0; - right: 0; - bottom: 0; -} .mdl-layout { &__header-button { display: block; - height: @layout-header-button-desktop-size; - width: @layout-header-button-desktop-size; - + height: $layout-header-button-desktop-size; + width: $layout-header-button-desktop-size; position: absolute; top: 0; left: 0; z-index: 3; - margin: 8px 12px; border: 0; - - line-height: @layout-header-button-desktop-size + 2; + line-height: $layout-header-button-desktop-size + 2; font-size: 26px; line-height: 50px; text-align: center; - cursor: pointer; - .user-select(none); - .flex-shrink(0); - - @media screen and (max-width: @layout-desktop-size-threshold) { + @include user-select(none); + @include flex-shrink(0); + @media screen and (max-width: $layout-desktop-size-threshold) { margin: 4px; } } @@ -142,55 +45,51 @@ .page-content { max-width: 1080px; - @media screen and (max-width: @layout-tablet-size-threshold) { + @media screen and (max-width: $layout-tablet-size-threshold) { padding: 0; - } + } } .mdl-form { padding: 0; - @media screen and (max-width: @layout-mobile-size-threshold) { + @media screen and (max-width: $layout-mobile-size-threshold) { margin-top: 0; margin-left: 0; margin-right: 0; width: 100%; } &__row { - .flex-display(); + @include flex-display(); flex-direction: row; - .flex-wrap(nowrap); - .align-items(center); - .align-items-2011(center); - + @include flex-wrap(nowrap); + @include align-items(center); + @include align-items-2011(center); white-space: nowrap; - - height: @form-row-desktop-height; + height: $form-row-desktop-height; box-sizing: content-box; padding: 4px 0; - margin: 0 @mdl-grid-spacing; - - border-bottom: 1px solid @item-separator-color; - - @media screen and (max-width: @layout-tablet-size-threshold) { - height: @form-row-mobile-height; - padding: 4px @mdl-grid-spacing; + margin: 0 $mdl-grid-spacing; + border-bottom: 1px solid $item-separator-color; + @media screen and (max-width: $layout-tablet-size-threshold) { + height: $form-row-mobile-height; + padding: 4px $mdl-grid-spacing; margin: 0; html.ui-layout-condensed & { - height: @form-row-desktop-height-condensed; + height: $form-row-desktop-height-condensed; } } - @media screen and (min-width: @layout-tablet-size-threshold) { + @media screen and (min-width: $layout-tablet-size-threshold) { &:last-child, &:nth-last-child(2):nth-child(even) { border: none; } } - & > * { + &>* { display: block; } &--height-auto { height: auto; - .justify-content(center); + @include justify-content(center); html.ui-layout-condensed &.mdl-form__row { height: auto; } @@ -199,22 +98,20 @@ display: none; } html.ui-layout-condensed & { - height: @form-row-desktop-height-condensed; + height: $form-row-desktop-height-condensed; } } &__image { - .mdl-form__control& { + .mdl-form__control#{&} { padding-left: 0; padding-right: 0; max-width: 100%; - img { max-width: 100%; } } - - @media screen and (max-width: @layout-tablet-size-threshold) { - .mdl-form__control& { + @media screen and (max-width: $layout-tablet-size-threshold) { + .mdl-form__control#{&} { padding-left: 0; padding-right: 0; } @@ -229,16 +126,16 @@ cursor: pointer; } &__icon { - .flex-shrink(0); + @include flex-shrink(0); width: 32px; - padding-left: @form-row-desktop-padding; + padding-left: $form-row-desktop-padding; html.ui-layout-condensed & { - padding-left: @form-row-desktop-padding-condensed; + padding-left: $form-row-desktop-padding-condensed; } - @media screen and (max-width: @layout-tablet-size-threshold) { - padding-left: @form-row-mobile-padding; + @media screen and (max-width: $layout-tablet-size-threshold) { + padding-left: $form-row-mobile-padding; html.ui-layout-condensed & { - padding-left: @form-row-mobile-padding-condensed; + padding-left: $form-row-mobile-padding-condensed; } } html:not(.ui-icons-enabled) & { @@ -249,7 +146,6 @@ max-height: 32px; width: auto; height: auto; - html.ui-layout-condensed & { max-width: 28px; max-height: 28px; @@ -257,36 +153,34 @@ } } &__label { - @media screen and (max-width: @layout-tablet-size-threshold) { - padding-left: @form-row-mobile-padding; + @media screen and (max-width: $layout-tablet-size-threshold) { + padding-left: $form-row-mobile-padding; html.ui-layout-condensed & { - padding-left: @form-row-mobile-padding-condensed; + padding-left: $form-row-mobile-padding-condensed; } } - padding-left: @form-row-desktop-padding; + padding-left: $form-row-desktop-padding; html.ui-layout-condensed & { - padding-left: @form-row-desktop-padding-condensed; + padding-left: $form-row-desktop-padding-condensed; } - - .flex-shrink(0); - .flex-grow(2); - .flex-2011(2 2 auto); - + @include flex-shrink(0); + @include flex-grow(2); + @include flex-2011(2 2 auto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } &__control { - @media screen and (max-width: @layout-tablet-size-threshold) { - padding-right: @form-row-mobile-padding; + @media screen and (max-width: $layout-tablet-size-threshold) { + padding-right: $form-row-mobile-padding; html.ui-layout-condensed & { - padding-left: @form-row-mobile-padding-condensed; + padding-left: $form-row-mobile-padding-condensed; } } - padding-right: @form-row-desktop-padding; + padding-right: $form-row-desktop-padding; padding-left: 4px; html.ui-layout-condensed & { - padding-left: @form-row-desktop-padding-condensed; + padding-left: $form-row-desktop-padding-condensed; } font-weight: 700; html.ui-capitalize-values & { @@ -304,20 +198,22 @@ margin: 0; } &__background-flex { - width: calc(~"100% - 12px"); + width: calc(#{"100% - 12px"}); margin: 0 0 0 12px; } - &.is-upgraded.is-lowest-value ~ .mdl-slider__background-flex > - .mdl-slider__background-upper { + &.is-upgraded.is-lowest-value~.mdl-slider__background-flex>.mdl-slider__background-upper { left: 0; } } - .mdl-button, .mdl-button:focus { + .mdl-button, + .mdl-button:focus { box-shadow: none; -webkit-box-shadow: none; } } - &__setpoint, &__colorpicker, &__rollerblind { + &__setpoint, + &__colorpicker, + &__rollerblind { .mdl-button { min-width: 0; padding-top: 6px; @@ -343,24 +239,20 @@ } &__title { margin: 0; - padding-left: @form-row-desktop-padding + @mdl-grid-spacing; - + padding-left: $form-row-desktop-padding + $mdl-grid-spacing; html.ui-layout-condensed & { - padding-left: @form-row-desktop-padding-condensed + @mdl-grid-spacing; + padding-left: $form-row-desktop-padding-condensed + $mdl-grid-spacing; } - padding-top: 25px; padding-bottom: 10px; - html.ui-layout-condensed & { padding-top: 15px; padding-bottom: 5px; } - - @media screen and (max-width: @layout-tablet-size-threshold) { - padding-left: @form-row-mobile-padding + @mdl-grid-spacing; + @media screen and (max-width: $layout-tablet-size-threshold) { + padding-left: $form-row-mobile-padding + $mdl-grid-spacing; html.ui-layout-condensed & { - padding-left: @form-row-desktop-padding-condensed + @mdl-grid-spacing; + padding-left: $form-row-desktop-padding-condensed + $mdl-grid-spacing; } } } @@ -369,7 +261,8 @@ html.ui-capitalize-values & { text-transform: uppercase; } - &--setpoint, &--rollerblind { + &--setpoint, + &--rollerblind { padding: 0 10px 0 5px; } &--group { @@ -379,7 +272,8 @@ &--text-link { font-weight: normal; } - &--switch, &--slider { + &--switch, + &--slider { padding: 0 10px 0 10px; } } @@ -388,7 +282,8 @@ flex-shrink: 2; text-overflow: ellipsis; } - &__webview, &__video { + &__webview, + &__video { padding-left: 0px; padding-right: 0px; width: 100%; @@ -410,15 +305,12 @@ position: absolute; background: rgba(50, 50, 50, 0.3); z-index: 10; - - .expand(); - .flex-display(flex); + @include expand(); + @include flex-display(flex); overflow-y: auto; - - .align-items(center); - .align-items-2011(center); - .justify-content(center); - + @include align-items(center); + @include align-items-2011(center); + @include justify-content(center); &--overflow { display: block; } @@ -431,7 +323,7 @@ .ui-layout-condensed & { padding: 10px; } - @media screen and (max-width: @layout-tablet-size-threshold) { + @media screen and (max-width: $layout-tablet-size-threshold) { padding: 20px; } } @@ -443,20 +335,22 @@ .mdl-radio { width: 100%; &__item { - border-bottom: 1px solid @item-separator-color; + border-bottom: 1px solid $item-separator-color; padding-left: 20px; } &__group &__label { padding-top: 17px; width: 100%; display: inline-block; - height: @form-row-desktop-height + 14px; + height: $form-row-desktop-height + 14px; box-sizing: border-box; } &__group & { padding-left: 35px; } - &__outer-circle, &__inner-circle, &__ripple-container { + &__outer-circle, + &__inner-circle, + &__ripple-container { margin-top: 20px; } } @@ -489,8 +383,7 @@ html.flexbox-legacy { } .mdl-form { display: block; - border-bottom: 1px solid @item-separator-color; - + border-bottom: 1px solid $item-separator-color; &__row { // 2009 syntax display: -webkit-box; @@ -506,7 +399,6 @@ html.flexbox-legacy { -webkit-box-orient: horizontal; -webkit-box-align: center; -webkit-box-pack: center; - &__content { -webkit-box-flex: 2; } @@ -520,29 +412,27 @@ html.flexbox-legacy { } // Colorpicker - -@slider-height: 20px; -@colorpicker-desktop-size: 300px; -@colorpicker-mobile-size: 270px; - -.slider-background() { - background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%); - background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%); +$slider-height: 20px; +$colorpicker-desktop-size: 300px; +$colorpicker-mobile-size: 270px; +@mixin slider-background() { + background: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%); + background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%); } -.slider-track() { +@mixin slider-track() { display: block; - height: @slider-height; + height: $slider-height; border-radius: 0; background: transparent; color: transparent; border: none; } -.slider-thumb() { +@mixin slider-thumb() { -webkit-appearance: none; - width: @slider-height; - height: @slider-height; + width: $slider-height; + height: $slider-height; box-sizing: border-box; -moz-box-sizing: border-box; border-radius: 0; @@ -555,51 +445,48 @@ html.flexbox-legacy { &__image { display: block; position: relative; - width: @colorpicker-desktop-size; - height: @colorpicker-desktop-size; - @media screen and (max-width: @layout-mobile-size-threshold) { - width: @colorpicker-mobile-size; - height: @colorpicker-mobile-size; + width: $colorpicker-desktop-size; + height: $colorpicker-desktop-size; + @media screen and (max-width: $layout-mobile-size-threshold) { + width: $colorpicker-mobile-size; + height: $colorpicker-mobile-size; } background: url("images/colorwheel.png") no-repeat; background-size: 100%; - .user-select(none); + @include user-select(none); overflow: hidden; cursor: pointer; } &__brightness { -webkit-appearance: none; position: absolute; - .slider-background(); - + @include slider-background(); top: 15px; padding: 0; margin: 0; - - width: @colorpicker-desktop-size - 30px; - @media screen and (max-width: @layout-mobile-size-threshold) { - width: @colorpicker-mobile-size - 30px; + width: $colorpicker-desktop-size - 30px; + @media screen and (max-width: $layout-mobile-size-threshold) { + width: $colorpicker-mobile-size - 30px; } - height: @slider-height; + height: $slider-height; z-index: 3; - &::-ms-track { - .slider-track(); + @include slider-track(); } &::-webkit-slider-runnable-track { - .slider-track(); + @include slider-track(); } &::-moz-range-track { - .slider-track(); + @include slider-track(); } &::-moz-range-thumb { - .slider-thumb(); + @include slider-thumb(); } &::-webkit-slider-thumb { - .slider-thumb(); + @include slider-thumb(); } &::-ms-thumb { - .slider-thumb(); + @include slider-thumb(); } &::-ms-fill-upper { background: none; @@ -616,36 +503,31 @@ html.flexbox-legacy { position: relative; z-index: 2; bottom: 0; - width: @colorpicker-desktop-size - 30px; - @media screen and (max-width: @layout-mobile-size-threshold) { - width: @colorpicker-mobile-size - 30px; + width: $colorpicker-desktop-size - 30px; + @media screen and (max-width: $layout-mobile-size-threshold) { + width: $colorpicker-mobile-size - 30px; } - height: @slider-height; + height: $slider-height; } &__handle { - @handle-size: 24px; - + $handle-size: 24px; position: absolute; top: 50%; left: 50%; box-sizing: border-box; -moz-box-sizing: border-box; - border: 4px solid white; - width: @handle-size; - height: @handle-size; - margin: -(@handle-size / 2) -0 0 -(@handle-size / 2); - border-radius: @handle-size / 2; - box-shadow: - 0 0 0 2px #aaa inset, - 0 0 0 2px #aaa; - + width: $handle-size; + height: $handle-size; + margin: -($handle-size / 2) -0 0 -($handle-size / 2); + border-radius: $handle-size / 2; + box-shadow: 0 0 0 2px #aaa inset, 0 0 0 2px #aaa; pointer-events: none; } &__controls { position: relative; padding: 15px; - border-bottom: 1px solid @item-separator-color; + border-bottom: 1px solid $item-separator-color; } &__buttons { padding: 5px; @@ -656,9 +538,9 @@ html.flexbox-legacy { .page { &-static { &__content { - padding: @form-row-desktop-padding; - @media screen and (max-width: @layout-tablet-size-threshold) { - padding: @form-row-mobile-padding; + padding: $form-row-desktop-padding; + @media screen and (max-width: $layout-tablet-size-threshold) { + padding: $form-row-mobile-padding; } } } @@ -683,9 +565,9 @@ html.flexbox-legacy { .mdl-modal { &--colorpicker { - max-width: @colorpicker-desktop-size; - @media screen and (max-width: @layout-mobile-size-threshold) { - max-width: @colorpicker-mobile-size; + max-width: $colorpicker-desktop-size; + @media screen and (max-width: $layout-mobile-size-threshold) { + max-width: $colorpicker-mobile-size; } } } @@ -693,30 +575,25 @@ html.flexbox-legacy { .mdl-notify { border-radius: 2px 2px 0 0; background: #323232; - - @media screen and (max-width: @layout-mobile-size-threshold) { + @media screen and (max-width: $layout-mobile-size-threshold) { border-radius: 0; width: 100%; } - &__text { padding: 14px 24px; vertical-align: middle; color: white; font-weight: 400; } - &__container { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; - - .flex-display(); - .justify-content(center); + @include flex-display(); + @include justify-content(center); } - &--hidden { display: none; } @@ -727,7 +604,6 @@ html.flexbox-legacy { .mdl-slider.mdl-slider.is-upgraded { -ms-appearance: none; height: 32px; - margin: 0; + margin: 0; } } - diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/_mixins.scss b/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/_mixins.scss new file mode 100644 index 00000000000..b5e947e78b2 --- /dev/null +++ b/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/_mixins.scss @@ -0,0 +1,63 @@ +@mixin user-select($val) { + -webkit-user-select: $val; + -moz-user-select: $val; + -ms-user-select: $val; + user-select: $val; +} + +@mixin flex-display($display: flex) { + display: #{"-webkit-${display}"}; + display: #{"-moz-${display}"}; + display: #{"-ms-${display}box"}; + display: #{"-ms-${display}"}; + display: $display; +} + +@mixin flex-grow($grow: 0) { + -webkit-flex-grow: $grow; + -moz-flex-grow: $grow; + -ms-flex-grow: $grow; + flex-grow: $grow; +} + +@mixin flex-shrink($shrink: 1) { + -webkit-flex-shrink: $shrink; + -moz-flex-shrink: $shrink; + -ms-flex-shrink: $shrink; + flex-shrink: $shrink; +} + +@mixin flex-wrap($wrap) { + flex-wrap: $wrap; + -webkit-flex-wrap: $wrap; +} + +@mixin align-items($align) { + -webkit-align-items: $align; + -moz-align-items: $align; + -ms-align-items: $align; + align-items: $align; +} + +@mixin align-items-2011($align) { + -ms-flex-align: $align; + flex-align: $align; +} + +@mixin justify-content($param) { + -webkit-justify-content: $param; + -ms-justify-content: $param; + justify-content: $param; +} + +@mixin flex-2011($flex) { + -ms-flex: $flex; + flex: $flex; +} + +@mixin expand() { + top: 0; + left: 0; + right: 0; + bottom: 0; +} diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/_theming.scss b/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/_theming.scss new file mode 100644 index 00000000000..3aa45e7500d --- /dev/null +++ b/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/_theming.scss @@ -0,0 +1,56 @@ +body[data-theme="default"] { + --primary-color: #3f51b5; + --header-bg: var(--primary-color); + --header-text-color: #fff; + --body-bg: #f5f5f5; + --container-bg: #fff; + --container-text-color: #616161; + --switch-on-track-bg: #9fa8da; + --border-color: #ccc; +} + +body[data-theme="dark"] { + --primary-color: #3f51b5; + --header-bg: #101010; + --header-text-color: #c0c0c0; + --body-bg: #181818; + --container-bg: #232323; + --container-text-color: #c0c0c0; + --switch-on-track-bg: #9fa8da; + --border-color: #343434; +} + +.mdl-layout__header { + background-color: #3f51b5 !important; + background-color: var(--header-bg, #3f51b5) !important; + color: #fff !important; + color: var(--header-text-color, #fff) !important; +} + +body { + background-color: #f5f5f5 !important; + background-color: var(--body-bg, #f5f5f5) !important; +} + +.mdl-form { + background-color: #fff !important; + background-color: var(--container-bg, #fff) !important; + color: #616161 !important; + color: var(--container-text-color, #616161) !important; +} + +.mdl-form__row { + border-bottom: 1px solid #ccc; + border-bottom: 1px solid var(--border-color, #ccc); +} + +.mdl-switch.is-checked .mdl-switch__track { + background: #9fa8da; + background: var(--switch-on-track-bg, #9fa8da); +} + +.mdl-switch.is-checked .mdl-switch__thumb, +.mdl-switch__ripple-container .mdl-ripple { + background: #3f51b5; + background: var(--primary-color, #3f51b5); +} diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/_variables.scss b/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/_variables.scss new file mode 100644 index 00000000000..f5687a2241e --- /dev/null +++ b/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/_variables.scss @@ -0,0 +1,15 @@ +$layout-header-button-desktop-size: 48px; +$layout-header-button-mobile-size: 32px; +$layout-desktop-size-threshold: 1024px; +$layout-tablet-size-threshold: 850px; +$layout-mobile-size-threshold: 440px; +$form-row-mobile-height: 52px; +$form-row-desktop-height: 48px; +$form-row-desktop-height-condensed: 36px; +$form-row-mobile-height-condensed: 40px; +$form-row-desktop-padding: 16px; +$form-row-mobile-padding: 12px; +$form-row-desktop-padding-condensed: 10px; +$form-row-mobile-padding-condensed: 4px; +$mdl-grid-spacing: 8px; +$item-separator-color: lighten(black, 80); diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/smarthome.scss b/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/smarthome.scss new file mode 100644 index 00000000000..b5d2401b290 --- /dev/null +++ b/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/smarthome.scss @@ -0,0 +1,10 @@ +/** + * Eclipse Smarthome BasicUI stylesheet + * + * @author Vlad Ivanov — initial version + * @author Kuba Wolanin - converted to SASS + */ +@import 'variables'; +@import 'mixins'; +@import 'layout'; +@import 'theming';