Create new theme or update the old one #932

cuba-platform · Jul 17, 2018 · 709478e · 709478e
1 parent ba8f245
commit 709478e
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 13 deletions.
diff --git a/modules/web/src/com/haulmont/cuba/web/app/hoverloginwindow/hover-loginwindow.xml b/modules/web/src/com/haulmont/cuba/web/app/hoverloginwindow/hover-loginwindow.xml
@@ -64,15 +64,16 @@
                     </columns>
                     <rows>
                         <row id="loginFieldRow">
-                            <vbox colspan="2">
+                            <cssLayout colspan="2"
+                                       width="100%">
                                 <textField id="loginField"
                                            stylename="c-login-username"
                                            width="100%"/>
                                 <passwordField id="passwordField"
                                                capsLockIndicator="capsLockIndicator"
                                                stylename="c-login-password"
                                                width="100%"/>
-                            </vbox>
+                            </cssLayout>
                         </row>
                         <row id="localesRow">
                             <checkBox id="rememberMeCheckBox"

diff --git a/modules/web/themes/halo/app/login-window.scss b/modules/web/themes/halo/app/login-window.scss
@@ -134,8 +134,9 @@ $cuba-login-password-height: $v-unit-size !default;
     height: $cuba-login-username-height;
   }
 
-  .c-login-username.v-textfield-focus {
-    border-bottom-width: first-number($v-border);
+  .c-login-username.v-textfield:focus + .c-login-password,
+  .c-login-username.v-textfield-focus + .c-login-password {
+    border-top-color: $v-focus-color;
   }
 
   .c-login-password {

diff --git a/modules/web/themes/halo/components/sidemenu/sidemenu.scss b/modules/web/themes/halo/components/sidemenu/sidemenu.scss
@@ -152,9 +152,19 @@ $cuba-sidemenu-top-offset: floor(($v-unit-size - $v-unit-size * 0.8) / 2);
  * @group sidemenu
  */
 $cuba-sidemenu-top-height: $v-unit-size + 2 * $cuba-sidemenu-top-offset;
+/**
+ * The sidemenu background color.
+ * @group sidemenu
+ */
+$cuba-sidemenu-background-color: if(is-dark-color($v-app-background-color), darken($v-app-background-color, 4%), lighten($v-app-background-color, 8%)) !default;
+
+$cuba-sidemenu-title-gradient: true !default;
+
+$cuba-sidemenu-title-font-size: $v-font-size--h2 !default;
+$cuba-sidemenu-title-font-weight: $v-font-weight !default;
 
 @mixin halo-cuba-sidemenu($primary-stylename: c-sidemenu) {
-  $bg: if(is-dark-color($v-app-background-color), darken($v-app-background-color, 4%), lighten($v-app-background-color, 8%)) !default;
+  $bg: $cuba-sidemenu-background-color;
 
   .#{$primary-stylename}-user {
     background: transparent;
@@ -180,20 +190,23 @@ $cuba-sidemenu-top-height: $v-unit-size + 2 * $cuba-sidemenu-top-offset;
   }
 
   .#{$primary-stylename}-title {
-    @include valo-gradient($color: $v-selection-color);
+    @if $cuba-sidemenu-title-gradient {
+      @include valo-gradient($color: $v-selection-color);
+      border-bottom: valo-border($color: $v-selection-color);
+    }
     $font-color: valo-font-color($v-selection-color, 1);
     color: $font-color;
     text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color);
     padding: round($v-unit-size/3) round($v-unit-size/2);
 
-    border-bottom: valo-border($color: $v-selection-color);
     @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));
 
     text-align: center;
     width: 100%;
 
     .v-label {
-      font-size: $v-font-size--h2;
+      font-size: $cuba-sidemenu-title-font-size;
+      font-weight: $cuba-sidemenu-title-font-weight;
     }
   }
 

diff --git a/modules/web/themes/hover/hover-defaults.scss b/modules/web/themes/hover/hover-defaults.scss
@@ -15,8 +15,8 @@
  *
  */
 
-$v-app-background-color: #0d0d0d;
-$v-background-color: if(is-dark-color($v-app-background-color), lighten($v-app-background-color, 10%), lighten($v-app-background-color, 8%));
+$v-app-background-color: #f2f2f2;
+$v-background-color: lighten($v-app-background-color, 15%);
 
 $v-font-color: valo-font-color($v-background-color, 0.85);
 $v-font-size: 14px;
@@ -70,6 +70,12 @@ $cuba-checkbox-size: 18px;
 $cuba-checkbox-line-height: $cuba-checkbox-size;
 $cuba-checkbox-tick-size: round($v-font-size * 0.85);
 
+$cuba-login-btn-background: $v-focus-color none;
+$cuba-login-btn-font-weight: 700;
+$cuba-login-btn-height: $v-unit-size * 1.25;
+$cuba-login-btn-margin-top: 0;
+$cuba-login-btn-width: 100%;
+
 $cuba-login-caption-font-size: round($v-font-size * 1.45);
 $cuba-login-caption-font-weight: 700;
 $cuba-login-locale-border-width: 0;
@@ -85,10 +91,16 @@ $cuba-login-username-height: $v-unit-size + $v-unit-size / 3;
 $cuba-menubar-background-color: rgba(36, 36, 36, 1);
 $cuba-menubar-border-color: $cuba-menubar-background-color;
 $cuba-menubar-height: $v-unit-size + $v-unit-size / 3;
-$cuba-menubar-text-color: #b3b3b3;
-$cuba-menubar-menuitem-background-selected-color: rgba(191, 191, 191, 0.1);
+$cuba-menubar-menuitem-background-selected-color: lighten($cuba-menubar-background-color, 25%);
 $cuba-menubar-menuitem-border-radius: 0;
-$cuba-menubar-menuitem-text-selected-color: #fff;
+$cuba-menubar-menuitem-text-selected-color: valo-font-color($cuba-menubar-menuitem-background-selected-color, 0.95);
+$cuba-menubar-text-color: valo-font-color($cuba-menubar-background-color, 0.7);
+
+$cuba-sidemenu-background-color: rgba(36, 36, 36, 1);
+$valo-menu-background-color: rgba(36, 36, 36, 1);
+$cuba-sidemenu-title-gradient: false;
+$cuba-sidemenu-title-font-size: round($v-font-size * 1.45);
+$cuba-sidemenu-title-font-weight: 700;
 
 $cuba-maintabsheet-tab-border-top-width: 0;
 $cuba-maintabsheet-tab-margin-left: 0;