mosaico 1.0.0

data/vendor/assets/mosaico-0.16.0/mosaico/spec/stylesheet-spec.js

@@ -0,0 +1,177 @@
+'use strict';
+/* globals console:false, describe:false, it:false, expect:false, jasmine:false */
+
+var mockery = require('mockery');
+mockery.enable();
+mockery.registerAllowables(['../src/js/converter/declarations.js', 'console', './utils.js', './domutils.js', 'console', '../bower_components/mensch'])
+
+mockery.registerMock('jquery', require('cheerio'));
+
+mockery.registerMock('mensch/lib/parser.js', function() {
+  var parse = require('../bower_components/mensch').parse;
+  return parse.apply(parse, arguments);
+});
+var processStylesheetRules = require('../src/js/converter/stylesheet.js');
+
+var mockedWithBindingProvider = function(x, y, a, b) {
+  return "$" + x + '.' + a + "[" + b + "]";
+};
+
+var blockDefsUpdater = function() {
+  console.log("BDU", arguments);
+};
+
+var themeUpdater = function() {
+  console.log("TU", arguments);
+};
+
+describe('Stylesheet declaration processor', function() {
+
+  it('should add "namespacing" to every rule', function() {
+    var result;
+    // function(style, rules, localWithBindingProvider, blockDefsUpdater, themeUpdater, basePath, rootModelName, templateName) {
+    result = processStylesheetRules('a { b: c }', undefined, mockedWithBindingProvider, undefined, undefined, '.', 'template', 'block');
+    expect(result).toEqual("<!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a{ b: c }");
+
+    result = processStylesheetRules('a{b:c}', undefined, mockedWithBindingProvider, undefined, undefined, '.', 'template', 'block');
+    expect(result).toEqual("<!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a{b:c}");
+
+    result = processStylesheetRules('a, b { b: c } @media all { c { d: e } }', undefined, mockedWithBindingProvider, undefined, undefined, '.', 'template', 'block');
+    expect(result).toEqual("<!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a, <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->b{ b: c } @media all { <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->c{ d: e } }");
+
+    // processStylesheetRules('a { b: c }', undefined, mockedBindingProvider, blockDefsUpdater, themeUpdater, '.', 'template', 'block');
+  });
+
+  it('should process simple -ko properties', function() {
+    var result;
+    // function(style, rules, localWithBindingProvider, blockDefsUpdater, themeUpdater, basePath, rootModelName, templateName) {
+    result = processStylesheetRules('a { b: c; -ko-b: @myc }', undefined, mockedWithBindingProvider, undefined, undefined, '.', 'template', 'block');
+    expect(result).toEqual("<!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a{ b: c; b: <!-- ko text: $block.myc[c]() -->c<!-- /ko -->}");
+
+    result = processStylesheetRules('prova{color: #3f3f3f;-ko-color:@[\'#3f3f3f\'];}\r\nprova{color: #3f3f3f;-ko-color:@[\'#3f3f3f\'];}', undefined, mockedWithBindingProvider, undefined, undefined, '.', 'template', 'block');
+    expect(result).toEqual("<!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->prova{color: #3f3f3f;color: <!-- ko text: '#3f3f3f' -->#3f3f3f<!-- /ko -->;}\r\n<!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->prova{color: #3f3f3f;color: <!-- ko text: '#3f3f3f' -->#3f3f3f<!-- /ko -->;}");
+
+  });
+
+  it('should process [data-ko-block=] directive', function() {
+    var result;
+
+    var blockDefsUpdater = jasmine.createSpy("blockDefsUpdater");
+
+    // function(style, rules, localWithBindingProvider, blockDefsUpdater, themeUpdater, basePath, rootModelName, templateName) {
+    result = processStylesheetRules('a[data-ko-block=foo] { b: c; -ko-b: @myc }', undefined, mockedWithBindingProvider, blockDefsUpdater, themeUpdater, '.', 'template', 'block');
+    expect(result).toEqual("<!-- ko foreach: $root.findObjectsOfType($data, 'foo') --> <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a<!-- ko text: '#'+id() -->foo<!-- /ko -->{ b: c; b: <!-- ko text: $foo.myc[c]() -->c<!-- /ko --> } <!-- /ko -->");
+
+    expect(blockDefsUpdater).toHaveBeenCalledWith('foo', '', { contextName: 'block' });
+    // blockDefsUpdater.calls.reset();
+
+    result = processStylesheetRules('a[data-ko-block=foo], [data-ko-block=foo] a { b: c; -ko-b: @myc }', undefined, mockedWithBindingProvider, blockDefsUpdater, themeUpdater, '.', 'template', 'block');
+    expect(result).toEqual("<!-- ko foreach: $root.findObjectsOfType($data, 'foo') --> <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a<!-- ko text: '#'+id() -->foo<!-- /ko -->, <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko --><!-- ko text: '#'+id() -->foo<!-- /ko --> a{ b: c; b: <!-- ko text: $foo.myc[c]() -->c<!-- /ko --> } <!-- /ko -->");
+
+    // expect(blockDefsUpdater).toHaveBeenCalledWith('foo', '', undefined, 'block');
+    // expect(blockDefsUpdater.calls.count()).toEqual(2);
+    // blockDefsUpdater.calls.reset();
+
+    result = processStylesheetRules('a[data-ko-block=foo],\n [data-ko-block=foo] a { b: c; -ko-b: @myc }', undefined, mockedWithBindingProvider, blockDefsUpdater, themeUpdater, '.', 'template', 'block');
+    expect(result).toEqual("<!-- ko foreach: $root.findObjectsOfType($data, 'foo') --> <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a<!-- ko text: '#'+id() -->foo<!-- /ko -->, <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko --><!-- ko text: '#'+id() -->foo<!-- /ko --> a{ b: c; b: <!-- ko text: $foo.myc[c]() -->c<!-- /ko --> } <!-- /ko -->");
+
+    result = processStylesheetRules('a[data-ko-block=foo]{}b[data-ko-block=foo]{}', undefined, mockedWithBindingProvider, blockDefsUpdater, themeUpdater, '.', 'template', 'block');
+    expect(result).toEqual("<!-- ko foreach: $root.findObjectsOfType($data, 'foo') --> <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a<!-- ko text: '#'+id() -->foo<!-- /ko -->{} <!-- /ko --><!-- ko foreach: $root.findObjectsOfType($data, 'foo') --> <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->b<!-- ko text: '#'+id() -->foo<!-- /ko -->{} <!-- /ko -->");
+
+    result = processStylesheetRules('a[data-ko-block=foo] { } b[data-ko-block=foo] { } ', undefined, mockedWithBindingProvider, blockDefsUpdater, themeUpdater, '.', 'template', 'block');
+    expect(result).toEqual("<!-- ko foreach: $root.findObjectsOfType($data, 'foo') --> <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a<!-- ko text: '#'+id() -->foo<!-- /ko -->{ }  <!-- /ko --><!-- ko foreach: $root.findObjectsOfType($data, 'foo') --> <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->b<!-- ko text: '#'+id() -->foo<!-- /ko -->{ }  <!-- /ko -->");
+
+    result = processStylesheetRules('a[data-ko-block=foo]{\n}b[data-ko-block=foo]{\n}', undefined, mockedWithBindingProvider, blockDefsUpdater, themeUpdater, '.', 'template', 'block');
+    expect(result).toEqual("<!-- ko foreach: $root.findObjectsOfType($data, 'foo') --> <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a<!-- ko text: '#'+id() -->foo<!-- /ko -->{\n} <!-- /ko --><!-- ko foreach: $root.findObjectsOfType($data, 'foo') --> <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->b<!-- ko text: '#'+id() -->foo<!-- /ko -->{\n} <!-- /ko -->");
+
+  });
+
+  it('should throw error on multiple different [data-ko-block=] directive', function() {
+    var result, exception;
+    // function(style, rules, localWithBindingProvider, blockDefsUpdater, themeUpdater, basePath, rootModelName, templateName) {
+    try {
+      result = processStylesheetRules('a[data-ko-block=foo], b[data-ko-block=bar] { b: c; -ko-b: @myc }', undefined, mockedWithBindingProvider, blockDefsUpdater, themeUpdater, '.', 'template', 'block');
+    } catch (e) {
+      exception = e;
+    }
+    expect(result).toBe(undefined);
+    expect(exception).toMatch(/^Found multiple/);
+  });
+
+  it('should process multiline [data-ko-block=] directive', function() {
+    var result;
+    // function(style, rules, localWithBindingProvider, blockDefsUpdater, themeUpdater, basePath, rootModelName, templateName) {
+    result = processStylesheetRules('    a[data-ko-block=foo] {\n      b: c;\n      -ko-b: @myc\n    }\n', undefined, mockedWithBindingProvider, blockDefsUpdater, themeUpdater, '.', 'template', 'block');
+    expect(result).toEqual("    <!-- ko foreach: $root.findObjectsOfType($data, 'foo') -->\n    <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a<!-- ko text: '#'+id() -->foo<!-- /ko -->{\n      b: c;\n      b: <!-- ko text: $foo.myc[c]() -->c<!-- /ko -->\n    }\n    <!-- /ko -->");
+
+    // function(style, rules, localWithBindingProvider, blockDefsUpdater, themeUpdater, basePath, rootModelName, templateName) {
+    result = processStylesheetRules('    f { g: h; }\n    i{j:k}\n    a[data-ko-block=foo] {\n      b: c;\n      -ko-b: @myc\n    }\n', undefined, mockedWithBindingProvider, blockDefsUpdater, themeUpdater, '.', 'template', 'block');
+    expect(result).toEqual("    <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->f{ g: h; }\n    <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->i{j:k}\n    <!-- ko foreach: $root.findObjectsOfType($data, 'foo') -->\n    <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a<!-- ko text: '#'+id() -->foo<!-- /ko -->{\n      b: c;\n      b: <!-- ko text: $foo.myc[c]() -->c<!-- /ko -->\n    }\n    <!-- /ko -->");
+
+
+    result = processStylesheetRules("\n    [data-ko-block=tripleArticleBlock] .links-color a,\n    [data-ko-block=tripleArticleBlock] .links-color a:hover {\n      color: #3f3f3f;\n      -ko-color: @longTextStyle.linksColor;\n      text-decoration: underline;\n    }\na{b:c}", undefined, mockedWithBindingProvider, blockDefsUpdater, themeUpdater, '.', 'template', 'block');
+    expect(result).toEqual("\n    <!-- ko foreach: $root.findObjectsOfType($data, 'tripleArticleBlock') -->\n    <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko --><!-- ko text: '#'+id() -->tripleArticleBlock<!-- /ko --> .links-color a, <!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko --><!-- ko text: '#'+id() -->tripleArticleBlock<!-- /ko --> .links-color a:hover{\n      color: #3f3f3f;\n      color: <!-- ko text: $tripleArticleBlock.longTextStyle.linksColor[#3f3f3f]() -->#3f3f3f<!-- /ko -->;\n      text-decoration: underline\n    }\n    <!-- /ko --><!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a{b:c}");
+  });
+
+  it('should ignore comments or unknown rules but keep them', function() {
+    var result;
+    // function(style, rules, localWithBindingProvider, blockDefsUpdater, themeUpdater, basePath, rootModelName, templateName) {
+    result = processStylesheetRules('/* first */a { b: c; /* second */-ko-b: @myc }/* third */', undefined, mockedWithBindingProvider, undefined, undefined, '.', 'template', 'block');
+    expect(result).toEqual("/* first */<!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a{ b: c; /* second */b: <!-- ko text: $block.myc[c]() -->c<!-- /ko -->}/* third */");
+
+    result = processStylesheetRules('@keyframes{a{-ko-b:@c}}a {b:c}', undefined, mockedWithBindingProvider, undefined, undefined, '.', 'template', 'block');
+    expect(result).toEqual("@keyframes{a{-ko-b:@c}}<!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a{b:c}");
+  });
+
+  it('should parse unsupported supports rules', function() {
+    var result;
+    result = processStylesheetRules('@supports cips {a{b:1;-ko-b:@myb}}a {b:c}', undefined, mockedWithBindingProvider, undefined, undefined, '.', 'template', 'block');
+    expect(result).toEqual("@supports cips {<!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a{b:1;b: <!-- ko text: $block.myb[1]() -->1<!-- /ko -->}}<!-- ko text: templateMode =='wysiwyg' ? '#main-wysiwyg-area ' : '' --><!-- /ko -->a{b:c}");
+  });
+
+  it('should parse -ko-blockdefs definitions', function() {
+    var result;
+    var blockDefsUpdater = jasmine.createSpy("blockDefsUpdater");
+    result = processStylesheetRules('@supports -ko-blockdefs { color { widget: color } color:preview { -ko-color: @color } }', undefined, mockedWithBindingProvider, blockDefsUpdater, undefined, '.', 'template', 'block');
+    expect(result).toEqual("");
+    expect(blockDefsUpdater).toHaveBeenCalledWith('color', '', { widget: 'color' });
+    expect(blockDefsUpdater).toHaveBeenCalledWith('color', undefined, { previewBindings: [{
+      type: 'property',
+      name: '-ko-color',
+      value: '@color',
+      position: {
+        start: {
+          line: 1,
+          col: 67
+        },
+        end: {
+          line: 1,
+          col: 85
+        }
+      }
+    }]});
+    // console.log("BBB", blockDefsUpdater.calls);
+  });
+
+  it('should parse -ko-blockdefs definitions, even empty declarations', function() {
+    var result;
+    var blockDefsUpdater = jasmine.createSpy("blockDefsUpdater");
+    result = processStylesheetRules('@supports -ko-blockdefs { color { } }', undefined, mockedWithBindingProvider, blockDefsUpdater, undefined, '.', 'template', 'block');
+    expect(blockDefsUpdater).toHaveBeenCalledWith('color', '', {});
+    expect(result).toEqual("");
+    // console.log("BBB", blockDefsUpdater.calls);
+  });
+
+  it('should raise an error when mixing preview selctor with other declarations', function() {
+    var result, exception;
+    try {
+      result = processStylesheetRules('@supports -ko-blockdefs { color, color:preview { } }', undefined, mockedWithBindingProvider, blockDefsUpdater, undefined, '.', 'template', 'block');
+    } catch (e) {
+      exception = e;
+    }
+    expect(result).toBeUndefined();
+    expect(exception).toMatch(/^Cannot mix/);
+    // console.log("BBB", blockDefsUpdater.calls);
+  });
+
+});

data/vendor/assets/mosaico-0.16.0/mosaico/src/css/app_standalone.less

@@ -0,0 +1,7 @@
+@import "../../bower_components/font-awesome/less/font-awesome.less";
+@import 'style_mosaico.less';
+
+@fa-font-path: "fa/fonts";
+
+@import (less) "../../bower_components/toastr/toastr.css";
+@import (less) "../../bower_components/evol-colorpicker/css/evol.colorpicker.css";

data/vendor/assets/mosaico-0.16.0/mosaico/src/css/app_standalone_material.less

@@ -0,0 +1,350 @@
+@import 'app_standalone.less';
+
+@accent-color: #900000; // #A01020; // #ff9800;
+@background-color: #eeeeee;
+// @link-color: #ff9800;
+// @link-color: #ff5722; // #ea1c0d;
+@link-color: #ff5722; // #ea1c0d;
+
+@font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", "Liberation Sans", Arimo, sans-serif;
+@standard-border-radius: 2px;
+@info-border-radius: @standard-border-radius;
+@button-border-radius: @standard-border-radius;
+@large-balloon-border-radius: 2px; 
+
+@object-background-color: #DDDDDD;
+// @mosaico-object-shadow: 1px 1px 2px lighten(@shadow-color, 30%);
+
+@input-background-color: white;
+@input-border-color: lighten(@text-color, 20%);
+
+@mosaico-selection-color: @link-color;
+
+#main-preview #preview-toolbar {
+  padding: 1px 5px;
+}
+
+#toolbar {
+  padding: 1px 5px;
+}
+
+@button-background-color: @link-color;
+@button-border-color: transparent;
+
+@ui-tabs-panel-padding: 0;
+
+// @button-hover-background-color: 
+
+.button-style() {
+  text-transform: uppercase;
+}
+
+#main-edit-area .tool {
+  border-radius: 100%;
+  padding: 4px;
+  padding-bottom: 2px;
+  box-shadow: 1px 1px 3px @shadow-color;
+}
+
+#toolbar, #preview-toolbar {
+  .ui-button {
+    padding-top: 7px;
+    padding-bottom: 7px;
+    line-height: 22px;
+
+    background-color: @mosaico-ui-background-color;
+    &:hover, &.pressed {
+      background-color: lighten(@mosaico-ui-background-color, 10%);
+    }
+    &.selected, &.ui-state-active {
+      border-bottom: 2px solid @button-text-color;
+      border-top: 0;
+    }
+    &.ui-button-disabled, &.ui-button-disabled .ui-icon, &.ui-button-disabled .ui-button-text {
+      color: mix(@mosaico-ui-background-color, @button-text-color);
+    }
+  }
+} 
+
+#main-toolbox #tooltabs.ui-tabs > .ui-tabs-nav {
+  box-shadow: 0 0 10px @shadow-color;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 105; // the panel is 100, and the main toolbar 110
+}
+
+#main-toolbox #tooltabs.ui-tabs {
+  .ui-tabs-nav {
+    font-size: 1em;
+    li {
+      margin: 1px 1px 0 0;
+      line-height: @topbar-height - 4px;
+    }
+  }
+}
+
+.addblockbutton {
+  box-shadow: 1px 1px 3px @shadow-color;
+}
+
+.tabs-style(@activeclass: ~'.active', @buttonstyle: false) {
+
+  text-transform: uppercase;
+
+  & when (@buttonstyle) {
+    border-bottom: 0;
+    background-color: transparent;
+  }
+  li > a when (@buttonstyle) {
+    background-color: transparent; 
+    &:hover {
+      background-color: lighten(@mosaico-ui-background-color, 10%);
+      border-bottom: 3px solid lighten(@mosaico-ui-background-color, 10%);
+    } 
+  }
+
+  li@{activeclass} a {
+    & when(@buttonstyle) {
+      background-color: transparent;
+      color: @button-text-color;
+      border-bottom: 3px solid @button-text-color;
+    } 
+  }
+}
+
+#main-toolbox {
+  .blockCheck input[type=checkbox] {
+    &:checked + .checkbox-replacer:after,
+    & + .checkbox-replacer:before {
+      border-radius: 50%;
+      // padding: 5px;
+      box-shadow: 1px 1px 2px @shadow-color;
+    }
+
+    & + .checkbox-replacer:after,
+    &:checked + .checkbox-replacer:before {
+      border-radius: 30px;
+      background-color: lighten(@button-background-color, 20%);
+      color: @button-text-color;
+      // margin: 0 -2px;
+    }
+    & + .checkbox-replacer:after {
+      padding-left: 15px;
+      margin-left: -15px;
+      border-color: transparent;
+    }
+    &:checked + .checkbox-replacer:before {
+      padding-right: 15px;
+      margin-right: -15px;
+      border-color: transparent;
+    }
+  }
+
+
+  .objEdit .propInput input[type=checkbox] {
+    &:checked + .checkbox-replacer:before {
+      margin-left: 20px;
+      background-color: @button-background-color;
+    }
+    & + .checkbox-replacer:after,
+    & + .checkbox-replacer:before {
+      content: " ";
+      display: block;
+      transition: margin-left .2s, background-color .2s;
+    }
+    & + .checkbox-replacer:before {
+      width: 20px;
+      height: 20px;
+      background-color: white;
+      border-radius: 50%;
+      font-size: 120%;
+      box-shadow: 1px 1px 3px @shadow-color;
+    }
+    &:checked + .checkbox-replacer:after {
+      background-color: lighten(@button-background-color, 20%);
+    }
+    & + .checkbox-replacer:after {
+      width: 34px;
+      height: 14px;
+      margin: -16px 2px 0 2px;
+      border-radius: 7px;
+      background-color: lighten(@text-color, 30%);
+    }
+  }
+
+}
+.mo .objEdit input[type=checkbox]+.checkbox-replacer:before {
+  color: @button-background-color;
+}
+
+.mo .propInput .data-select select {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.mo .propInput .data-select:after {
+  background-color: transparent;
+  color: lighten(@text-color, 30%);
+}
+.mo .propInput .evo-pointer:before {
+  background-color: white;
+  color: lighten(@text-color, 30%);
+}
+.mo .propInput .data-integer .ui-spinner-button .ui-button-text {
+  background-color: transparent;
+  color: lighten(@text-color, 30%);
+}
+.mo .propInput .data-select:hover:after,
+.mo .propInput .evo-pointer:hover:before,
+.mo .ui-button.ui-spinner-button.ui-state-hover,
+.mo .propInput .data-integer .ui-button-text,
+.mo .propInput .data-integer .ui-spinner-button:hover .ui-button-text {
+  color: @button-background-color;
+}
+
+.mo .propInput .ui-spinner .ui-spinner-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.mo .ui-button.ui-spinner-button {
+  background-color: transparent;
+  // color: lighten(@text-color, 30%); 
+  .ui-button-text .ui-icon {
+    color: lighten(@text-color, 30%); 
+  }
+}
+
+#main-toolbox .objLabel.level1 {
+  font-weight: bold;
+  border-bottom-width: 1px;
+}
+
+.mo .objPreview {
+  border-width: 0;
+  box-shadow: 1px 1px 3px @shadow-color;
+}
+
+.mo .objLabel {
+  border-bottom: 0;
+  font-weight: bold;
+  font-size: 80%;
+}
+
+.mo .objEdit.level1 {
+  border-top: 2px solid @accent-color;
+}
+
+#main-toolbox .objLabel.level1 {
+  font-size: 1em;
+  padding-top: .5em;
+}
+
+.mo #toolstyles .objLabel.level1, .mo #tooltheme .objLabel.level1 {
+  padding-left: 70px;
+}
+
+.mo .objLabel.level0 {
+  border-bottom: none;
+}
+
+.input-style() {
+  box-shadow: none;
+}
+
+.mo {
+  a {
+    &:link, &:visited {
+      color: white;
+    }
+  }
+}
+#main-toolbox {
+  .noSelectedBlock, .customStyleHelp, .objEmpty, .galleryEmpty {
+    font-size: 1em;
+  }
+  .noSelectedBlock, .customStyleHelp, .objEmpty {
+    margin-left: -15px;
+    padding-left: 25px;
+    padding-right: 25px;
+    width: ~"calc(100% + 40px)";
+  }
+}
+
+
+
+& when(true) {
+  .mo .objEdit.level1 {
+      background-color: white;
+      box-shadow: 1px 1px 3px #888;
+      border-top: 0;
+      padding: 6px;
+      padding-top: .5em;
+  }
+
+  .mo #toolstyles, .mo #tooltheme {
+    .objEdit.level1 {
+      border-top-left-radius: 30px;
+      .objLabel.level1 {
+        padding-bottom: 0;
+        padding-top: 1em;
+      }
+    }
+  }
+
+  .mo .objPreview {
+      border-width: 0;
+      box-shadow: inset 1px 1px 4px rgba(0,0,0,.3);
+      top: 4px;
+      left: 4px;
+  }
+
+  .mo #toolstyles .objLabel.level1, .mo #tooltheme .objLabel.level1 {
+    padding-left: 60px;
+  }
+
+  .mo .propInput input[type=text], 
+  .mo .propInput input[type=number], 
+  .mo .propInput input[type=url],
+  .mo .propInput select,
+  .mo .propInput .data-select select,
+  .mo .propInput .ui-spinner .ui-spinner-input {
+    border-width: 0 0 2px 0;
+    background-color: transparent;
+    &:hover, &:focus {
+      border-color: @link-color;
+    }
+  }
+
+  .mo .propInput .data-color input[type=text] {
+    margin-left: 35px;
+    &:hover, &:focus {
+      margin-left: 35px;
+    }
+  }
+
+  .mo .propInput .evo-pointer {
+    border-radius: 50%;
+    width: 30px;
+    border: 0;
+    box-shadow: 1px 1px 3px @shadow-color;
+    &:before {
+      content: none;
+      display: none;
+    }
+  }
+
+  // file manager broser button
+  .mo .propInput .ui-textbutton .ui-textbutton-button {
+    border-radius: 50%;
+    box-shadow: 1px 1px 3px @shadow-color;
+  }
+
+}
+
+.wintitle() {
+  color: @button-text-color;
+  .ui-icon {
+    color: @button-text-color;
+  }
+}