/src/main/webapp/VAADIN/themes/edit-valo/edit-valo.scss - Annotate - EDIT - EDIT Project Management

| Branch: | Tag: | Revision:

cdm-vaadin/src/main/webapp/VAADIN/themes/edit-valo/edit-valo.scss @ 79295d9d

-d703592
+// Global variable overrides. Must be declared before importing Valo.
 // Defines the plaintext font size, weight and family. Font size affects general component sizing.
-            b6ea271c
+$v-font-size: 14px; // default in valo is 16px
-d703592
+//$v-font-weight: 300;
-f46faf
+$v-font-family: "Open Sans", sans-serif;
-d703592
+            Andreas Kohlbecker
 // Defines the border used by all components.
 //$v-border: 1px solid (v-shade 0.7);
 //$v-border-radius: 4px;
 // Affects the color of some component elements, e.g Button, Panel title, etc
 //$v-background-color: hsl(210, 0%, 98%);
 // Affects the color of content areas, e.g  Panel and Window content, TextField input etc
 //$v-app-background-color: $v-background-color;
-f46faf
+// Affects the visual appearance of all component
-d703592
+//$v-gradient: v-linear 8%;
 //$v-bevel-depth: 30%;
 //$v-shadow-opacity: 5%;
 // Defines colors for indicating status (focus, success, failure)
 //$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
 //$v-friendly-color: #2c9720;
 //$v-error-indicator-color: #ed473b;
 // ================== DARK ================ //
-            ec462234
+            Andreas Kohlbecker
-d2e0764
+// $v-app-loading-text: "Dark Valo";
-d703592
+$v-background-color: #444d50;
 $v-focus-color: #07a9ca;
 $v-focus-style: 0 0 3px 2px $v-focus-color;
 $v-bevel-depth: 40%;
 $v-gradient: v-linear 12%;
 $v-border-radius: 10px;
 $v-font-family: Roboto, sans-serif;
 $v-font-weight: 400;
 $v-font-weight--header: 400;
 $v-bevel: inset 0 1px 2px v-tint, inset 0 0 1px (v-tint 0.1);
 $v-shadow: 0 0 0 3px rgba(0,0,0,0.32), 0 1px 0 3px rgba(255,255,255,0.14);
 $v-textfield-bevel: inset 0 2px 2px v-shade;
 $v-textfield-shadow: $v-shadow;
 $v-unit-size: 40px;
 $v-overlay-shadow: 0 0 0 3px (v-shade 8), 0 5px 10px (v-shade 4);
 $v-component-group-spacing: 6px;
-            ec462234
+            Andreas Kohlbecker
-d703592
+// ========================================== //
 // For more information, see: https://vaadin.com/book/-/page/themes.valo.html
 // Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples
 @import "../valo/valo.scss";
-            dc3f8070
+@import "valo-fix.scss";
-            2260591f
+@import "custom-fields.scss";
-d0a00
+            Andreas Kohlbecker
 // ========================================== //
 // import custom font icons TODO rename font
 @include v-font(IcoMoon, "../../../../../fonts/icomoon");
 .IcoMoon {
-            2260591f
+   font-family: IcoMoon;
-d0a00
+   font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    text-align: center;
+}
-            af8569f7
+// ========================================== //
 // Status colors for the redistration
 //
 // change-color cant be used since this is not fully supported by the vaadin sass-compiler
 // see https://github.com/vaadin/sass-compiler/issues/147
-            bc74cf95
+$status-reference-color:$v-focus-color;
 $hue-offset: hue($status-reference-color);
 $plain-red: adjust-color($status-reference-color, $hue: -1 * $hue-offset);  // red as 0 degree hue
-            af8569f7
+$status-rejected-color: adjust-color($plain-red, $hue: 0deg);
-eca0
+$status-curation-color: adjust-color($plain-red, $hue: 35deg);
-            af8569f7
+$status-preparation-color: adjust-color($plain-red, $hue: 60deg);
 $status-published-color: adjust-color($plain-red, $hue: 105deg);
 $status-ready-color: adjust-color($plain-red, $hue: 180deg);
 // ========================================== //
-d703592
+@mixin edit-valo {
   @include valo;
   // Insert your own theme rules here
-f46faf
+            Andreas Kohlbecker
-f24060
+  // --- AbstractPageView --- //
   #header {
     text-align: center;
     margin: round($v-layout-spacing-vertical/2); // corresponds to layout spacing
     font-size: $v-font-size--huge; // corresponds to valo style huge (26px)
+  }
   #subheader {
     text-align: center;
     margin: round($v-layout-spacing-vertical/2);
     font-size: $v-font-size; // valo default font size (16px)
+  }
   // ------------------- //
-b938
+  .logo_giant {
     font-size: 400%;
+   }
-            af8569f7
+   .v-button-giant {
-b938
+     font-size: 32px;
      .v-icon {
        font-size: 64px;
        line-height: 50px;
+     }
+   }
-b501287
+            Andreas Kohlbecker
    .v-label .caption {
        font-size: $v-font-size--small;
+   }
-b938
+            Andreas Kohlbecker
-            ef0d6020
+   // label with caption and icon horizonatally aligned
    // to apply this to a Vaadin Label set 'label-nowrap'
    // as style
-b501287
+            Andreas Kohlbecker
     .v-caption-label-nowrap, .v-label-label-nowrap {
         display: inline;
+    }
     .v-label-label-nowrap {
 //         margin-left: 8px; // TODO use sass variable here
 //         vertical-align: baseline;
         .v-icon {
            display : inline;
-            ef0d6020
+            Andreas Kohlbecker
-c553d89
+            Andreas Kohlbecker
-            c7627153
+            Andreas Kohlbecker
    .friendly-foreground {
         color: $v-friendly-color;
+    }
-b501287
+            Andreas Kohlbecker
-            c7627153
+   .v-button .button-badge {
          @include valo-badge-style($states: inactive, $background-color: lighten($v-background-color, 10%), $active-color: $v-focus-color);
+    }
-            ef0d6020
+            Andreas Kohlbecker
-b938
+   .dashboard-actions {
       margin: 0 10%;
-f1ceae0
+      .dashboard-action-2 {
         width: 50%;
         .v-label {
             white-space: normal;
+        }
+      }
-b938
+      .dashboard-action-3 {
         width: 33%;
         .v-label {
             white-space: normal;
+        }
+      }
       &[width-range~="-650px"] {
-f1ceae0
+          .dashboard-action-2, .dashboard-action-3 {
-b938
+              width: 100%;
+          }
+      }
+    }
-            bc74cf95
+            Andreas Kohlbecker
-f4344f
+            Andreas Kohlbecker
-            bc74cf95
+    // ===== workflow ==== //
-b4537c4
+            Andreas Kohlbecker
     #workflow-container {
         text-align: center;
-            b99cbf31
+        margin-top: $v-unit-size;
-b4537c4
+            Andreas Kohlbecker
-eb4451
+            Andreas Kohlbecker
-            bc74cf95
+    $workflow-icon-size: 110px;
     // can not be set per css as this need to set as property to the component in vaadin
     $workflow-timeline-bar-height: 10px;
     // the fator by which the caption should be smaller than the circe
     $workflow-caption-shrink: 0.64;
     $workflow-icon-margin-h: $workflow-icon-size / 5;
     $workflow-icon-left: $workflow-icon-margin-h / 2;
-b4537c4
+    $workflow-caption-font-size: $workflow-icon-size * $workflow-caption-shrink;
-eb4451
+    .workflow {
         .steps {
             z-index: 10;
             .v-csslayout {
                 width: $workflow-icon-size + 2 * $workflow-icon-margin-h;
                 .v-label {
                     display: block;
                     text-align: center;
+                }
+            }
+         }
          .timeline {
             display: block;
             position: relative;
             top: ($workflow-icon-size / 2) + $workflow-timeline-bar-height / 2;
             padding: 0 $workflow-icon-size / 2;
             .timeline-bar {
                 z-index: 0;
                 background-color: $v-font-color;
+            }
+        }
+    }
-            bc74cf95
+            Andreas Kohlbecker
     .workflow-item {
         .v-button {
             margin: 0 $workflow-icon-margin-h;
             font-size: $workflow-icon-size;
             height: $workflow-icon-size;
             width: $workflow-icon-size;
             line-height: $workflow-icon-size;
             .v-icon, .v-button-caption {
                 position: absolute;
                 left: $workflow-icon-left;
                 top: 0px;
+            }
             .v-button-caption {
                 font-family: monospace;
                 left: (($workflow-icon-size - $workflow-caption-font-size) / 2) + $workflow-icon-left; // 30px;
                 top: -2px;
                 color: $v-background-color;
                 font-size: $workflow-caption-font-size; // 70px;
+            }
+        }
+    }
-            c7627153
+    #workingset {
             padding: round($v-unit-size / 2);
-            d7c4522d
+            .registration-list, .registration-list-item {
-            c7627153
+                margin-top: round($v-unit-size / 2);
+            }
-e45
+            Andreas Kohlbecker
             .registration-list {
                 .v-gridlayout-slot {
                     border-bottom: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
+                }
+            }
-            c7627153
+            Andreas Kohlbecker
-            bc74cf95
+    // --------------------------------------------------- //
-            ec462234
+            Andreas Kohlbecker
-d0a00
+    .registration-list-item {
-f9eb1fe
+        border-top: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
         padding-top: 4px; // avoid button group to overlap with border
-ed87
+        .v-label-registration-state {
             margin-right: round($v-unit-size / 4);
+        }
         .v-caption-submitter {
             margin-right: round($v-unit-size / 8);
+        }
-f9eb1fe
+            Andreas Kohlbecker
-d0a00
+            Andreas Kohlbecker
    .registration-workflow-item {
        border: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
+    }
     // tab element being part of a process ----------- //
-            b99cbf31
+    // use $v-unit-size instead of $v-font-size * 3?
-d0a00
+    .workflow-step-wrap {
         padding-right: 10px;
         height: $v-font-size * 3;
         background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
         @include box-shadow(inset 0 0 5px $v-app-background-color);
+    }
     .workflow-step {
         line-height: $v-font-size * 3;
+    }
     .v-caption-workflow-step {
         vertical-align: top;
         padding: 0;
          .v-icon {
             line-height: $v-font-size * 3;
             font-size: $v-font-size * 3.5;
             padding-right: 10px;
             color: $v-background-color;
+        }
-            b99cbf31
+            Andreas Kohlbecker
     .workflow-tabsheet {
         table.v-tabsheet-tabs, .v-tabsheet-tabs tr, .v-tabsheet-tabs tbody {
           width: 100%;
+        }
         .v-tabsheet-tabitemcell {
               width: 25%;
+        }
         .v-tabsheet-tabitem {
             // background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
             // @include valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to right);
             // @include box-shadow(inset 0 0 5px $v-app-background-color);
             // background-color: $v-font-color
             // border: valo-border($border: 2px solid, $color: $v-font-color, $strength: 1);
             background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
             @include box-shadow(inset 0 0 5px $v-app-background-color);
             border: valo-border($border: 2px solid, $color: $v-app-background-color, $strength: 1);
             border-color: $v-app-background-color;
             .v-caption {
                 // line-height: $v-unit-size;
                 margin: 0;
                 padding: 0;
                 padding-right: $v-unit-size / 2;
                 border: 0px none;
+            }
             .v-icon {
                 line-height: $v-unit-size;
                 font-size: $v-unit-size * 1.8;
                 vertical-align: middle;
                 // padding-right: $v-unit-size / 2;
                 //color: $v-font-color;
                 color: $v-app-background-color;
+            }
+        }
-d0a00
+            Andreas Kohlbecker
     // ----------------------------------------------- //
-            b99cbf31
+            Andreas Kohlbecker
    // status colors --------------------------------- //
-d0a00
+    .status-REJECTED {
         color: $status-rejected-color;
+    }
     .status-CURATION {
         color: $status-curation-color;
+    }
     .status-PREPARATION {
         color: $status-preparation-color;
+    }
     .status-PUBLISHED {
         color: $status-published-color;
+    }
     .status-READY {
         color: $status-ready-color;
+    }
     .bg-status-REJECTED {
         background-color: $status-rejected-color;
+    }
     .bg-status-CURATION {
         background-color: $status-curation-color;
+    }
     .bg-status-PREPARATION {
         background-color: $status-preparation-color;
+    }
     .bg-status-PUBLISHED {
         background-color: $status-published-color;
+    }
     .bg-status-READY {
         background-color: $status-ready-color;
+    }
     // ----------------------------------------------- //
-            af8569f7
+            Andreas Kohlbecker
-            ec462234
+    #registration-list {
-f24060
+        /* --- for the css layout --- */
         overflow: auto;
         height: 100%;
         padding-left: round($v-unit-size/3);
         padding-right: round($v-unit-size/3);
         border: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
         border-radius: $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0;
         /* ----------------------------------------------- */
-f9eb1fe
+        // for grid rows
-eca0
+        .status-REJECTED {
-b501287
+            color: $status-rejected-color;
-            af8569f7
+            td.registrationType, td.status {
                 color: $status-rejected-color;
+            }
+        }
-eca0
+        .status-CURATION {
-b501287
+            color: $status-curation-color;
-            af8569f7
+            td.registrationType, td.status {
                 color: $status-curation-color;
+            }
+        }
-eca0
+        .status-PREPARATION {
-b501287
+            color: $status-preparation-color;
-            af8569f7
+            td.registrationType, td.status {
                 color: $status-preparation-color;
+            }
+        }
-eca0
+        .status-PUBLISHED {
-b501287
+            color: $status-published-color;
-            af8569f7
+            td.registrationType, td.status {
                 color: $status-published-color;
+            }
+        }
-eca0
+        .status-READY {
-b501287
+            color: $status-ready-color;
-            af8569f7
+            td.registrationType, td.status {
                 color: $status-ready-color;
+            }
-            ec462234
+            Andreas Kohlbecker
-e45
+            Andreas Kohlbecker
+    }
     // ---------------- custom components ----------------------- //
     .edit-button-group {
         margin-top: round($v-unit-size/10);
         .v-button {
             padding: 0 round($v-unit-size/4);
-d9d
+            height: round(2 * $v-unit-size/3 )
-e45
+            // margin: 0 round($v-unit-size/4);
+        }
-d9d
+        .v-label {
             display: inline;
             white-space: normal;
+        }
-            ec462234
+            Andreas Kohlbecker
-e45
+            Andreas Kohlbecker
-            fcba7787
+    // ---------- popup editor windows ---------------------------------//
     .v-window-top-toolbar {
         margin-bottom: round($v-unit-size/4);
         .v-component-group {
             float: right;
+        }
+    }
-f46faf
+            Andreas Kohlbecker
-            a6584bc2
+            Andreas Kohlbecker
-d703592
+            Andreas Kohlbecker

Project

General

Profile

EDIT