Havana SCSS theme, DateField, TextField, Select #PL-1995

build.gradle

@@ -18,7 +18,7 @@ allprojects {
 }
 
 buildscript {
-	def cubaPluginVersion = '1.5-SNAPSHOT'
+	def cubaPluginVersion = '1.5.1'
 	def docPluginVersion = '1.2.0-SNAPSHOT'
 	
 	def CUBA_PLUGIN_VERSION = 'cubaPluginVersion'
@@ -313,7 +313,7 @@ configure(webModule) {
         themes = ['havana']
         destDir = "${project.buildDir}/web/VAADIN/themes"
 //        compress = true
-//        sprites = false
+        sprites = true
 //        cleanup = true
     }
 

modules/gui/src/com/haulmont/cuba/gui/app/core/scheduled/scheduled-task-edit.xml

@@ -63,19 +63,19 @@
                 </row>
                 <row>
                     <label value="msg://com.haulmont.cuba.core.entity/ScheduledTask.period"/>
-                    <textField id="periodField" datasource="taskDs" property="period" width="150px"/>
+                    <textField id="periodField" datasource="taskDs" property="period" width="180px"/>
                 </row>
                 <row>
                     <label value="msg://com.haulmont.cuba.core.entity/ScheduledTask.timeout"/>
-                    <textField id="timeoutField" datasource="taskDs" property="timeout" width="150px"/>
+                    <textField id="timeoutField" datasource="taskDs" property="timeout" width="180px"/>
                 </row>
                 <row>
                     <label value="msg://com.haulmont.cuba.core.entity/ScheduledTask.startDate"/>
-                    <dateField id="startDateField" datasource="taskDs" property="startDate" width="150px"/>
+                    <dateField id="startDateField" datasource="taskDs" property="startDate" width="180px"/>
                 </row>
                 <row>
                     <label value="msg://com.haulmont.cuba.core.entity/ScheduledTask.timeFrame"/>
-                    <textField id="timeFrameField" datasource="taskDs" property="timeFrame" width="150px"/>
+                    <textField id="timeFrameField" datasource="taskDs" property="timeFrame" width="180px"/>
                 </row>
                 <row>
                     <label value="msg://com.haulmont.cuba.core.entity/ScheduledTask.permittedServers"/>

modules/gui/src/com/haulmont/cuba/gui/window.xsd

@@ -525,6 +525,7 @@
                 <xs:attributeGroup ref="hasOptions"/>
                 <xs:attributeGroup ref="hasCaptionSource"/>
                 <xs:attributeGroup ref="hasNullName"/>
+                <xs:attributeGroup ref="hasAlign"/>
 
                 <xs:attribute name="filterMode" type="filterMode" use="optional"/>
             </xs:extension>

modules/web/src/com/haulmont/cuba/web/gui/components/WebAbstractComponent.java

@@ -7,8 +7,13 @@ package com.haulmont.cuba.web.gui.components;
 
 import com.haulmont.cuba.gui.components.Component;
 import com.haulmont.cuba.gui.components.IFrame;
+import com.vaadin.server.Sizeable;
+import com.vaadin.ui.Layout;
 import org.dom4j.Element;
 
+import java.util.Arrays;
+import java.util.List;
+
 /**
  * @param <T>
  * @author abramov
@@ -18,6 +23,11 @@ public class WebAbstractComponent<T extends com.vaadin.ui.Component>
     implements
         Component, Component.Wrapper, Component.HasXmlDescriptor, Component.BelongToFrame {
 
+    private static final List<Sizeable.Unit> UNIT_SYMBOLS = Arrays.asList(
+            Sizeable.Unit.PIXELS, Sizeable.Unit.POINTS, Sizeable.Unit.PICAS,
+            Sizeable.Unit.EM, Sizeable.Unit.EX, Sizeable.Unit.MM,
+            Sizeable.Unit.CM, Sizeable.Unit.INCH, Sizeable.Unit.PERCENTAGE);
+
     private String id;
     protected T component;
 
@@ -102,8 +112,7 @@ public class WebAbstractComponent<T extends com.vaadin.ui.Component>
 
     @Override
     public int getHeightUnits() {
-        return 0;
-//        return component.getHeightUnits();
+        return UNIT_SYMBOLS.indexOf(component.getHeightUnits());
     }
 
     @Override
@@ -118,8 +127,7 @@ public class WebAbstractComponent<T extends com.vaadin.ui.Component>
 
     @Override
     public int getWidthUnits() {
-        return 0;
-//        return component.getWidthUnits();
+        return UNIT_SYMBOLS.indexOf(component.getWidthUnits());
     }
 
     @Override
@@ -141,12 +149,12 @@ public class WebAbstractComponent<T extends com.vaadin.ui.Component>
 
     @Override
     public void setAlignment(Alignment alignment) {
-/*        this.alignment = alignment;
+        this.alignment = alignment;
         final com.vaadin.ui.Component component = this.component.getParent();
         if (component instanceof Layout.AlignmentHandler) {
             ((Layout.AlignmentHandler) component).setComponentAlignment(this.component,
                     WebComponentsHelper.convertAlignment(alignment));
-        }*/
+        }
     }
 
     @Override

modules/web/themes/havana/app/app-window.scss

@@ -1,6 +1,6 @@
 // Application Window styles
 
-@mixin cuba-application-window($headerBackground: #315379, $controlHighLightColor: #506D8D) {
+@mixin cuba-application-window {
 
   .v-button.cuba-buttons-white-border {
     background: none;
@@ -25,7 +25,7 @@
 
   .v-button.cuba-buttons-white-border:hover {
     background: none;
-    border: solid 2px $controlHighLightColor;
+    border: solid 2px $theme_appMenuHighlightColor;
     .v-button-caption {
       text-shadow: black 1px 1px;
     }
@@ -40,14 +40,14 @@
       color: #fff;
       font-size: 12px;
       font-weight: normal;
-      font-family: Verdana, Arial, sans-serif;
+      font-family: $theme_fonts;
       text-shadow: black 1px 1px;
     }
   }
 
   .cuba-app-menubar {
     border-bottom: 1px solid #fff;
-    background: $headerBackground;
+    background: $theme_appHeaderBackgroundColor;
     padding-bottom: 0;
     padding-top: 0;
 
@@ -55,7 +55,7 @@
       color: #fff;
       font-size: 12px;
       font-weight: normal;
-      font-family: Verdana, Arial, sans-serif;
+      font-family: $theme_fonts;
       text-shadow: black 1px 1px;
     }
   }

modules/web/themes/havana/app/breadcrumbs.scss

@@ -3,9 +3,9 @@
   .cuba-breadcrumbs {
 
     .v-label {
-      font-family: Verdana, tahoma, sans-serif;
+      font-family: $theme_fonts;
       font-size: 10px;
-      color: #2B4666;
+      color: $theme_breadcrumbsColor;
       font-weight: normal;
       padding-top: 0;
     }
@@ -14,11 +14,18 @@
       background: transparent;
     }
 
-    .v-button-link .v-button-caption {
-      color: #2B4666;
-      font-size: 10px;
-      padding-top: 2px;
-      display: block;
+    .v-button-link {
+      border: none;
+
+      .v-button-caption {
+        color: $theme_breadcrumbsColor;
+        font-size: 10px;
+        display: block;
+      }
+    }
+
+    .v-button-link:focus {
+      border-style: none;
     }
   }
 

modules/web/themes/havana/app/folders-pane.scss

@@ -26,7 +26,7 @@
   .v-label.cuba-folders-pane-caption {
     font-size: 14px;
     color: #2B4766;
-    background: url("images/folders-pane-header-bg.png") no-repeat 5px bottom;
+    background: url(images/folders-pane-header-bg.png) no-repeat 5px bottom;
     padding-top: 5px;
     padding-left: 5px;
   }

modules/web/themes/havana/app/login-window.scss

@@ -17,17 +17,12 @@
   }
 
   .cuba-login-bottom {
-    background: #F4F6F8;
-    border: thin solid #CDE0EC;
+    background: $theme_loginFormBackgroundColor;
+    border: thin solid $theme_loginFormBorderColor;
     box-shadow: 0 0 5px rgba(0,0,0,0.25);
     -moz-box-shadow: 0 0 5px rgba(0,0,0,0.25);
     -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.25);
 
-    .cuba-login-password-field,
-    .cuba-login-username-field {
-      border: #a5c4e0 ridge 1px;
-    }
-
     .cuba-login-username-field.v-caption {
       font-weight: bold;
       font-size: 10pt;

modules/web/themes/havana/components/button/button.scss

@@ -5,7 +5,7 @@
     zoom: 1;
     text-align: center;
     text-decoration: none;
-    border: #9BB3D3 1px solid;
+    border: $theme_buttonBorderColor 1px solid;
     background: transparent url(images/button.gif) repeat-x;
     cursor: pointer;
     white-space: nowrap;
@@ -32,7 +32,7 @@
       .v-button-caption {
         font: inherit;
         font-size: 12px;
-        font-family: verdana, Tahoma, sans-serif;
+        font-family: $theme_fonts;
         vertical-align: middle;
         white-space: nowrap;
         color: #1E3146;
@@ -48,4 +48,32 @@
   .v-disabled.v-button:hover {
     background: transparent url(images/button.gif) repeat-x;
   }
+
+  .v-button-link {
+    border: 1px solid transparent;
+    text-align: left;
+    background: transparent;
+    padding: 0;
+
+    .v-button-caption {
+      text-decoration: underline;
+      color: $theme_linkColor;
+      text-align: left;
+    }
+
+    .v-button-wrap {
+      background: transparent;
+      height: inherit;
+      padding: 0;
+    }
+  }
+
+  .v-button-link:focus {
+    outline: none;
+    border: 1px dashed $theme_linkColor;
+  }
+
+  .v-button-link:hover {
+    background: transparent;
+  }
 }

modules/web/themes/havana/components/common/common.scss

@@ -1,15 +1,17 @@
 
 @mixin common {
-
   .v-ui {
     background: #F6F6F6;
-    font-family: Verdana, tahoma, arial, geneva, helvetica, sans-serif, "Trebuchet MS";
+    font-family: $theme_fonts;
     color: #000;
     font-size: 12px;
     line-height: 18px;
     height: 100%;
     width: 100%;
+  }
 
+  .v-ui,
+  .v-window {
     // Global font styles
     div,
     input,
@@ -19,7 +21,7 @@
     label,
     textarea,
     .v-widget {
-      font-family: Verdana, tahoma, arial, geneva, helvetica, sans-serif, "Trebuchet MS";
+      font-family: $theme_fonts;
       color: #464f52;
       font-size: 12px;
     }

modules/web/themes/havana/components/datefield/datefield.scss

@@ -0,0 +1,198 @@
+@mixin v-datefield {
+  .v-datefield {
+    white-space: nowrap;
+  }
+
+  .v-datefield-popupcalendar {
+    padding-right: 25px;
+  }
+
+  .v-datefield-button {
+    font-size: 12px;
+    height: 25px;
+    width: 25px;
+    margin: 0;
+    border: solid 1px $theme_fieldBorderColor;
+    border-left: 0;
+    background: #fff;
+    background-repeat: no-repeat;
+    background-origin: border-box;
+    background-clip: border-box;
+    background-image: url(sprites/date-select-button.png);  /** sprite-ref: components; */
+    vertical-align: top;
+    cursor: pointer;
+  }
+
+  .v-datefield-button-focus {
+    border: $theme_fieldFocusedBorderColor solid 1px ;
+    border-left: 0;
+  }
+
+  .v-datefield-button-readonly {
+    display: none;
+    visibility: hidden;
+  }
+
+  .v-datefield-popup {
+    font-family: $theme_fonts;
+    color: #000;
+    font-size: 12px;
+    background: #fff;
+    border: $theme_fieldPopupBorderColor solid 1px;
+    padding: 6px;
+
+    .v-datefield-calendarpanel-header td {
+      text-align: center;
+    }
+
+    .v-datefield-calendarpanel {
+      outline: none;
+      width: 19em;
+      font-size: 12px;
+      width: 16em;
+
+      table {
+        width: 100%;
+
+        td {
+          text-align: right;
+          width: 14.2%;
+          padding: 0;
+          margin: 0;
+
+          button {
+            outline: none;
+          }
+
+          span {
+            display: block;
+          }
+        }
+      }
+
+      .v-button-prevyear,
+      .v-button-nextyear,
+      .v-button-nextmonth,
+      .v-button-prevmonth {
+        display: block;
+        width: 15px;
+        height: 15px;
+        border: none;
+        padding: 0;
+        text-indent: -90000px;
+        margin: 0 auto;
+        background: transparent;
+        background-position: middle center;
+        background-repeat: no-repeat;
+      }
+
+      .v-button-prevmonth {
+        background-image: url(sprites/prevmonth.png); /** sprite-ref: components; */
+      }
+
+      .v-button-prevmonth:hover {
+        background-image: url(sprites/prevmonth-hover.png); /** sprite-ref: components; */
+      }
+
+      .v-button-nextmonth {
+        background-image: url(sprites/nextmonth.png); /** sprite-ref: components; */
+      }
+
+      .v-button-nextmonth:hover {
+        background-image: url(sprites/nextmonth-hover.png); /** sprite-ref: components; */
+      }
+
+      .v-button-nextyear {
+        background-image: url(sprites/nextyear.png); /** sprite-ref: components; */
+      }
+
+      .v-button-nextyear:hover {
+        background-image: url(sprites/nextyear-hover.png); /** sprite-ref: components; */
+      }
+
+      .v-button-prevyear {
+        background-image: url(sprites/prevyear.png); /** sprite-ref: components; */
+      }
+
+      .v-button-prevyear:hover {
+        background-image: url(sprites/prevyear-hover.png); /** sprite-ref: components; */
+      }
+    }
+
+    .v-datefield-calendarpanel-month {
+      font-weight: bold;
+      text-align: center;
+      white-space: nowrap;
+    }
+
+    strong {
+      color: #cd3331;
+      display: block;
+      width: 20px;
+      font-size: 12px;
+    }
+
+    .v-datefield-calendarpanel-day-today {
+      border: 1px solid $theme_fieldSelectionColor;
+      height: 14px
+    }
+
+    .v-disabled .v-datefield-calendarpanel-day,
+    .v-disabled .v-datefield-calendarpanel-day-today {
+      cursor: default;
+    }
+
+    .v-datefield-calendarpanel-day-entry {
+      color: #6a98b5;
+    }
+
+    .v-datefield-calendarpanel-day-disabled {
+      font-weight: normal;
+      color: #dddddd;
+      cursor: default;
+      opacity: 0.5;
+    }
+
+    .v-datefield-calendarpanel-day-entry.v-datefield-calendarpanel-day-disabled {
+      color: #afd6f8;
+    }
+
+    .v-datefield-calendarpanel-day {
+      height: 16px;
+      width: 14px;
+      padding: 1px 3px;
+      outline: 0;
+    }
+
+    .v-datefield-calendarpanel-day-selected {
+      font-weight: bold;
+      color: #fff;
+      background: $theme_fieldSelectionColor;
+      cursor: default;
+      border-right: 2px solid $theme_fieldSelectionColor;
+    }
+  }
+
+  .v-datefield-time {
+    white-space: nowrap;
+    font-size: 11px;
+  }
+
+  .v-datefield-time .v-label {
+    display: inline;
+  }
+
+  .v-datefield-time .v-select {
+    font-size: 10px;
+    padding: 0;
+    margin: 0;
+  }
+
+  .v-datefield-popup:focus {
+    outline: none;
+  }
+
+  .v-datefield-calendarpanel:focus {
+    outline: none;
+  }
+}

modules/web/themes/havana/components/groupbox/groupbox.scss

@@ -37,15 +37,16 @@ $groupBoxCaptionLineHeight: 18px;
           width: 9px;
           height: 9px;
           float: left;
+          cursor: pointer;
           margin-top: 4px;
           margin-right: 2px;
-          background: transparent no-repeat center left;
+          background: transparent;
+          background-repeat: no-repeat;
+          background-position: center left;
           background-image: url(sprites/expand.png); /** sprite-ref: components; */
-          cursor: pointer;
         }
 
         .cuba-groupbox-expander.expanded {
-          background: transparent no-repeat center left;
           background-image: url(sprites/collapse.png); /** sprite-ref: components; */
         }
 

modules/web/themes/havana/components/grouptable/grouptable.scss

@@ -5,14 +5,15 @@
       height: 9px;
       margin-top: 4px;
       margin-right: 2px;
-      background: transparent no-repeat center left;
+      background: transparent;
+      background-repeat: no-repeat;
+      background-position: center left;
       background-image: url(sprites/expand.png); /** sprite-ref: components; */
       display: inline-block;
       cursor: pointer;
     }
 
     .v-expanded .cuba-grouptable-group-cell {
-      background: transparent no-repeat center left;
       background-image: url(sprites/collapse.png); /** sprite-ref: components; */
     }
 

modules/web/themes/havana/components/menubar/menubar.scss

@@ -1,5 +1,5 @@
 
-@mixin v-menubar($submenuBackground: #315379, $highlightColor: #506D8D) {
+@mixin v-menubar {
 
   .v-menubar {
     height: 23px;
@@ -19,7 +19,7 @@
       padding-right: 10px;
       background: transparent;
       height: 19px;
-      font-family: verdana, tahoma, arial, geneva, helvetica, sans-serif;
+      font-family: $theme_fonts;
       font-size: 12px;
       text-shadow: black 1px 1px;
 
@@ -46,7 +46,7 @@
       color: #000000;
       text-shadow: black 1px 1px;
       height: 19px;
-      background-color: $highlightColor;
+      background-color: $theme_appMenuHighlightColor;
     }
 
     .v-menubar-menuitem:hover {
@@ -55,7 +55,7 @@
       color: #000000;
       text-shadow: black 1px 1px;
       height: 19px;
-      background-color: $highlightColor;
+      background-color: $theme_appMenuHighlightColor;
     }
 
     .v-menubar-submenu-indicator {
@@ -81,11 +81,11 @@
     overflow: hidden;
     white-space: nowrap;
     border: 0;
-    background: $submenuBackground;
+    background: $theme_appSubmenuBackgroundColor;
     padding: 5px;
-    font-family: verdana, tahoma, arial, geneva, helvetica, sans-serif;
+    font-family: $theme_fonts;
     font-size: 12px;
-    border: solid 2px $highlightColor;
+    border: solid 2px $theme_appMenuHighlightColor;
 
     .v-menubar-menuitem {
       line-height: 16px;
@@ -114,7 +114,7 @@
 
     .v-menubar-menuitem-selected,
     .v-menubar-menuitem-shortcut-selected {
-      background-color: $highlightColor;
+      background-color: $theme_appMenuHighlightColor;
     }
 
     .v-menubar-menuitem-shortcut,
@@ -129,7 +129,10 @@
     }
 
     .v-menubar-submenu-indicator {
-      background: transparent no-repeat scroll right center;
+
+      background: transparent;
+      background-repeat: no-repeat;
+      background-position: right center;
       background-image: url(sprites/submenu-icon.png);  /** sprite-ref: components; */
       height: 16px;
       text-indent: -9999px;

modules/web/themes/havana/components/orderedlayout/orderedlayout.scss

@@ -0,0 +1,27 @@
+@mixin v-orderedlayout {
+  .v-horizontallayout,
+  .v-verticallayout {
+    overflow: hidden;
+    outline: 0;
+  }
+
+  .v-horizontallayout.v-margin-top,
+  .v-verticallayout.v-margin-top {
+    padding-top: 5px;
+  }
+
+  .v-horizontallayout.v-margin-right,
+  .v-verticallayout.v-margin-right {
+    padding-right: 5px;
+  }
+
+  .v-horizontallayout.v-margin-bottom,
+  .v-verticallayout.v-margin-bottom {
+    padding-bottom: 5px;
+  }
+
+  .v-horizontallayout.v-margin-left,
+  .v-verticallayout.v-margin-left {
+    padding-left: 5px;
+  }
+}

modules/web/themes/havana/components/select/select.scss

@@ -0,0 +1,178 @@
+@mixin v-filterselect {
+  $comboBoxBorder: 1px solid $theme_fieldBorderColor;
+  $comboBoxBorderFocused: 1px solid $theme_fieldFocusedBorderColor;
+  $comboBoxBorderReadonly: 1px solid $theme_fieldReadonlyBorderColor;
+
+  .v-filterselect {
+    height: 25px;
+    white-space: nowrap;
+    text-align: left; /* Force default alignment */
+    overflow: hidden;
+    background: #fff;
+    padding-right: 25px;
+
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+
+    border-left: $comboBoxBorder;
+
+    .v-icon {
+      float: left;
+    }
+
+    .v-filterselect-input {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      outline: 0;
+
+      border: $comboBoxBorder;
+      border-left: 0;
+
+      height: 25px;
+      margin: 0;
+      padding: 0;
+      font-size: 8pt;
+    }
+
+    .v-filterselect-button {
+      cursor: pointer;
+      height: 100%;
+      width: 25px;
+      margin-right: -25px;
+      border-collapse: separate;
+
+      background: transparent;
+      background-repeat: no-repeat;
+      background-position: center middle;
+      background-image: url(sprites/filter-button-bg.png);
+
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      border: $comboBoxBorder;
+      border-left: 0;
+    }
+  }
+
+  .v-filterselect-focus {
+    background: #fff;
+    border-left: $comboBoxBorderFocused;
+
+    .v-filterselect-button {
+      border: $comboBoxBorderFocused;
+      border-left: 0;
+
+      background-image: url(sprites/filter-button-focus-bg.png);
+    }
+
+    .v-filterselect-input:focus {
+      border: $comboBoxBorderFocused;
+      border-left: 0;
+    }
+  }
+
+  .v-filterselect.v-readonly {
+    border-left: $comboBoxBorderReadonly;
+
+    .v-filterselect-button {
+      border: $comboBoxBorderReadonly;
+      border-left: 0;
+
+      background-image: url(sprites/filter-button-readonly-bg.png);
+    }
+
+    .v-filterselect-input-readonly {
+      border: $comboBoxBorderReadonly;
+      border-left: 0;
+    }
+  }
+
+  .v-filterselect-suggestpopup {
+    border: 1px solid $theme_fieldPopupBorderColor;
+    font-family: $theme_fonts;
+    color: #000;
+    font-size: 12px;
+    line-height: 18px;
+    margin-top: -1px;
+    background: #f5f5f5 repeat-x;
+
+    .gwt-MenuItem {
+      padding: 1px 6px;
+      cursor: pointer;
+      height: 18px;
+      white-space: nowrap;
+
+      .v-icon {
+        margin-right: 3px;
+        vertical-align: middle;
+      }
+
+      span {
+        vertical-align: middle;
+      }
+    }
+
+    .gwt-MenuItem-selected {
+      background: $theme_fieldSelectionColor;
+      color: #fff;
+    }
+  }
+
+  .v-filterselect-nextpage,
+  .v-filterselect-nextpage-off,
+  .v-filterselect-prevpage-off,
+  .v-filterselect-prevpage {
+    height: 12px;
+    width: 100%;
+    background: transparent no-repeat 50% 0;
+    text-align: center;
+    margin: 2px 0 0 0;
+    overflow: hidden;
+  }
+
+  .v-filterselect-nextpage-off span,
+  .v-filterselect-prevpage-off span {
+    cursor: default;
+  }
+
+  .v-filterselect-nextpage span,
+  .v-filterselect-nextpage-off span,
+  .v-filterselect-prevpage-off span,
+  .v-filterselect-prevpage span {
+    display: block;
+    height: 12px;
+    width: 100%;
+    text-indent: -90000px;
+    cursor: pointer;
+    overflow: hidden;
+  }
+
+  .v-filterselect-status {
+    font-size: 11px;
+    line-height: 11px;
+    width: 100%;
+    padding: 4px 0px;
+    height: 11px;
+    white-space: nowrap;
+    text-align: center;
+    border-top: 1px solid #b6bbbc;
+  }
+
+  .v-filterselect-nextpage {
+    background-image: url(sprites/popup-down.png);  /** sprite-ref: components; */
+  }
+
+  .v-filterselect-prevpage {
+    background-image: url(sprites/popup-up.png);    /** sprite-ref: components; */
+  }
+
+  .v-filterselect-nextpage-off {
+    background-image: url(sprites/popup-down-disabled.png); /** sprite-ref: components; */
+  }
+
+  .v-filterselect-prevpage-off {
+    background-image: url(sprites/popup-up-disabled.png);  /** sprite-ref: components; */
+  }
+}

modules/web/themes/havana/components/splitpanel/splitpanel.scss

@@ -0,0 +1,64 @@
+@mixin v-splitpanel {
+  .v-splitpanel-horizontal, .v-splitpanel-vertical {
+    overflow: hidden;
+  }
+
+  .v-splitpanel-horizontal {
+    .v-splitpanel-hsplitter {
+      width: 4px;
+
+      div {
+        width: 4px;
+        font-size: 1px; /* for IE6 */
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        background: $theme_splitPanelSplitterColor url(images/ruler-vertical.png) center no-repeat;
+        cursor: e-resize;
+        margin: 0 0;
+      }
+    }
+  }
+
+  .v-splitpanel-vertical {
+    .v-splitpanel-vsplitter {
+      height: 10px;
+
+      div {
+        height: 6px;
+        background: $theme_splitPanelSplitterColor url(images/ruler-horizontal.png) center no-repeat;
+        border: 0;
+        cursor: n-resize;
+        margin: 0;
+      }
+    }
+  }
+}
+
+/* IE specific styles */
+
+* html .v-splitpanel-horizontal .v-splitpanel-hsplitter div {
+  height: 99%;
+}
+
+* html .v-splitpanel-vertical .v-splitpanel-vsplitter {
+  height: 10px;
+}
+
+* html .v-splitpanel-vertical .v-splitpanel-vsplitter div {
+  margin: 0;
+}
+
+/* Webkit fix */
+
+.v-webkit .v-splitpanel-horizontal .v-splitpanel-first-container,
+.v-webkit .v-splitpanel-horizontal .v-splitpanel-second-container {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.v-webkit .v-splitpanel-vertical .v-splitpanel-first-container,
+.v-webkit .v-splitpanel-vertical .v-splitpanel-second-container {
+  overflow-x: hidden;
+  overflow-y: auto;
+}

modules/web/themes/havana/components/textfield/textfield.scss

@@ -0,0 +1,22 @@
+
+@mixin v-textfield {
+  .v-textfield {
+    padding: 2px;
+    border: 1px solid $theme_fieldBorderColor;
+    margin: 0;
+    font-size: 12px;
+    height: 25px;
+    text-align: left;
+    background: #ffffff;
+  }
+
+  .v-textfield:focus {
+    border-color: $theme_fieldFocusedBorderColor;
+    outline: 0;
+  }
+
+  .v-textfield.v-readonly {
+    background: transparent;
+    border: $theme_fieldReadonlyBorderColor 1px solid;
+  }
+}

modules/web/themes/havana/components/window/window.scss

@@ -6,13 +6,13 @@
     background: transparent;
 
     .v-window-wrap {
-      font-family: verdana, Tahoma, Arial, sans-serif;
+      font-family: $theme_fonts;
       color: #fff;
 
       .v-window-outerheader {
         margin-left: 0;
         padding: 0 0 0 5px;
-        background: #2b4666 no-repeat left top;
+        background: $theme_windowHeaderColor no-repeat left top;
         cursor: move;
         height: auto;
 
@@ -21,12 +21,12 @@
           padding: 6px 5px 5px 7px;
           font-weight: bold;
           letter-spacing: 0;
-          background: #2b4666 no-repeat right top;
+          background: $theme_windowHeaderColor no-repeat right top;
           color: #ffffff;
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow: hidden;
-          font-family: verdana, "Trebuchet MS", tahoma, arial, sans-serif;
+          font-family: $theme_fonts;
 
           .v-icon {
             vertical-align: middle; /* This has to be 'middle', not 'bottom', to allow larger icons than 16px */
@@ -40,14 +40,14 @@
         right: 7px;
         width: 9px;
         height: 9px;
-        background: transparent no-repeat;
+        background: transparent;
+        background-repeat: no-repeat;
         background-image: url(sprites/close.png);  /** sprite-ref: components; */
         cursor: pointer;
         overflow: hidden;
       }
 
       .v-window-closebox:hover {
-        background: transparent no-repeat;
         background-image: url(sprites/close-active.png); /** sprite-ref: components; */
       }
 
@@ -56,7 +56,8 @@
         color: #1E3146;
         padding: 8px;
         font-size: 12px;
-        border: 1px solid #8aa9d1;
+        font-family: $theme_fonts;
+        border: 1px solid $theme_windowBorderColor;
       }
 
       .v-window-footer {

modules/web/themes/havana/havana-defaults.scss

@@ -0,0 +1,28 @@
+/*
+ * Global theme constants
+ */
+
+$theme_fonts: Verdana, tahoma, arial, geneva, helvetica, sans-serif, "Trebuchet MS";
+
+$theme_appHeaderBackgroundColor: #315379;
+$theme_appMenuHighlightColor: #506d8d;
+$theme_appSubmenuBackgroundColor: #315379;
+
+$theme_loginFormBackgroundColor: #f4f6f8;
+$theme_loginFormBorderColor: #cde0ec;
+
+$theme_windowHeaderColor: #2b4666;
+$theme_windowBorderColor: #8aa9d1;
+
+$theme_buttonBorderColor: #9bb3d3;
+
+$theme_fieldBorderColor: #a5c4e0;
+$theme_fieldFocusedBorderColor: #4d7ab2;
+$theme_fieldReadonlyBorderColor: #c3c3c3;
+$theme_fieldPopupBorderColor: #8aa9d1;
+$theme_fieldSelectionColor: #4d7ab2;
+
+$theme_breadcrumbsColor: #2b4666;
+$theme_linkColor: #0066ff;
+
+$theme_splitPanelSplitterColor: #eef3f9;

modules/web/themes/havana/havana.scss

@@ -11,10 +11,15 @@
 @import "components/panel/panel";
 @import "components/window/window";
 @import "components/button/button";
+@import "components/select/select";
 @import "components/menubar/menubar";
 @import "components/groupbox/groupbox";
+@import "components/textfield/textfield";
+@import "components/datefield/datefield";
+@import "components/splitpanel/splitpanel";
 @import "components/grouptable/grouptable";
 @import "components/multiupload/multiupload";
+@import "components/orderedlayout/orderedlayout";
 
 // Application specific
 @import "app/app-window";
@@ -25,15 +30,8 @@
 
 /**
  * Havana - Generic Platform SCSS theme
- *
- * @param $headerBackground - CSS background statement for app window header
- * @param $submenuBackground - CSS background statement for sub menu background
- * @param $menuHighlightColor - CSS color statement for highlight menu items and buttons in app window header
  */
-@mixin havana($headerBackground: #315379,
-              $submenuBackground: #315379,
-              $menuHighlightColor: #506D8D) {
-
+@mixin havana {
   @include base;
 
   @include common;
@@ -42,14 +40,19 @@
   @include v-panel;
   @include v-window;
   @include v-button;
-  @include v-menubar($submenuBackground, $menuHighlightColor);
+  @include v-menubar;
+  @include v-textfield;
+  @include v-datefield;
+  @include v-splitpanel;
+  @include v-filterselect;
+  @include v-orderedlayout;
 
   @include cuba-groupbox;
   @include cuba-grouptable;
   @include cuba-multiupload;
 
   @include cuba-login-window;
-  @include cuba-application-window($headerBackground, $menuHighlightColor);
+  @include cuba-application-window;
   @include cuba-folders-pane;
   @include cuba-breadcrumbs;
   @include cuba-log-control;

modules/web/themes/havana/styles.scss

@@ -1,3 +1,4 @@
+@import "havana-defaults";
 @import "havana";
 
 .havana {