EDIT

// Global variable overrides. Must be declared before importing Valo.

// Defines the plaintext font size, weight and family. Font size affects general component sizing.

$v-font-size: 14px; // default in valo is 16px

//$v-font-weight: 300;

$v-font-family: "Open Sans", sans-serif;

// 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;

// Affects the visual appearance of all component

//$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;

// $edit-v-shadow-spread-radius: 0px; // default

// ================== DARK ================ //

// $v-app-loading-text: "Dark Valo";

/*

*/

$edit-v-shadow-spread-radius: 3px;

$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 $edit-v-shadow-spread-radius rgba(0,0,0,0.32), 0 1px 0 $edit-v-shadow-spread-radius 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;

// ========================================== //

// 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";

@import "valo-fix.scss";

@import "custom-fields.scss";

// ========================================== //

// import custom font icons TODO rename font

@include v-font(IcoMoon, "../../../../../fonts/icomoon");

.IcoMoon {

   font-family: IcoMoon;

   font-style: normal;

   font-weight: normal;

   -webkit-font-smoothing: antialiased;

   -moz-osx-font-smoothing: grayscale;

   display: inline-block;

   text-align: center;

}

// ========================================== //

// Status colors for the registration

// 

// 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

$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

$status-rejected-color: adjust-color($plain-red, $hue: 0deg);

$status-curation-color: adjust-color($plain-red, $hue: 35deg); 

$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);

// ========================================== //

@mixin registration-status-colors($sub-selector: '') {

    .registration-status-REJECTED #{$sub-selector} {

        color: $status-rejected-color;

    }

    .registration-status-CURATION #{$sub-selector} {

        color: $status-curation-color;

    }

    .registration-status-PREPARATION #{$sub-selector} {

        color: $status-preparation-color;

    }

    .registration-status-PUBLISHED #{$sub-selector} {

        color: $status-published-color;

    }

    .registration-status-READY #{$sub-selector} {

        color: $status-ready-color;

    }

}

@mixin registration-status-bg-colors($sub-selector: '') {

    .bg-status-REJECTED #{$sub-selector} {

        background-color: $status-rejected-color;

    }

    .bg-status-CURATION #{$sub-selector} {

        background-color: $status-curation-color;

    }

    .bg-status-PREPARATION #{$sub-selector}  {

        background-color: $status-preparation-color;

    }

    .bg-status-PUBLISHED #{$sub-selector} {

        background-color: $status-published-color;

    }

    .bg-status-READY #{$sub-selector} {

        background-color: $status-ready-color;

    }

}

@mixin edit-valo {

  @include valo;

  // Insert your own theme rules here

  // --- 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)

  }

  // ------------------- // 

  .logo_giant {

    font-size: 400%;

   }

   .v-button-giant {

     font-size: 32px;

     .v-icon {

       font-size: 64px;

       line-height: 50px;

     }

   }

   .v-button-center-h {

    // requires width to be defined 

    display: block;

    margin: 0 auto;

   }

   .v-label .caption {

       font-size: $v-font-size--small;

   }

   // label with caption and icon horizonatally aligned

   // to apply this to a Vaadin Label set 'label-nowrap'

   // as style

    .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;

        }

    } 

   .friendly-foreground {

        color: $v-friendly-color;

    }

   .v-button .button-badge {

         @include valo-badge-style($states: inactive, $background-color: lighten($v-background-color, 10%), $active-color: $v-focus-color);

    } 

   .dashboard-actions {

      margin: 0 10%;

      .dashboard-action-2 {

        width: 50%;

        .v-label {

            white-space: normal;

        }

      }

      .dashboard-action-3 {

        width: 33%;

        .v-label {

            white-space: normal;

        }

      }

      &[width-range~="-650px"] {

          .dashboard-action-2, .dashboard-action-3 {

              width: 100%;

          }

      }

    }

    // ==== styles in eu.etaxonomy.cdm.vaadin.theme.EditValoTheme ==== // 

    // style for buttons highlighted as being active

    .v-button-highlite {

        color: $v-focus-color;

    }

    .v-panel-padding-left .v-panel-content {

        padding-left: round($v-unit-size / 4);

    }

     .v-select-optiongroup-optiongroup-caption-fix {

        margin-left: round($v-unit-size / 4);

     }

    // ===== workflow ==== // 

    #workflow {

        .registration-list {

                .v-gridlayout-slot {

                    border-bottom: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);

                }

            }

         .v-gridlayout-registration-list-item {

            padding: 0 round($v-unit-size / 4);

         }

    }

    $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;

    $workflow-caption-font-size: $workflow-icon-size * $workflow-caption-shrink;        

    .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;

            }

        }

    }

    .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;

            }

        }

    }

   // --------------------------------------------------- //

    #workingset {

            padding: round($v-unit-size / 2);

            .registration-list, .registration-list-item {

                margin-top: round($v-unit-size / 2);

            }

            .v-panel-content {

                padding: 0 round($v-unit-size/3);

            }

            .registration-list .item-footer {

                border-bottom: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);

            }

    }

    // --------------------------------------------------- //

    .v-caption-submitter {

            margin-right: round($v-unit-size / 8);

    }

    .registration-list-item {

        border-bottom: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);

        padding-top: 4px; // avoid button group to overlap with border

        .v-label-registration-state {

            margin-right: round($v-unit-size / 4);

        }            

    }

   .registration-workflow-item {

       border: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);

    }

    // tab element being part of a process ----------- //

    // use $v-unit-size instead of $v-font-size * 3?

    .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;

        }

    }

    .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;

            }

        }

    }

    // =============================================== //

    .registration-status {

        display: block;

    }

   @include registration-status-colors();

   @include registration-status-bg-colors(); // TODO still needed?

   @include registration-status-colors(.v-select-select);

    // ----------------------------------------------- //

    #registration-list {

        /* --- 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;

        /* ----------------------------------------------- */

        // TODO can the mixin registration-status-colors() be used here?

        // for grid rows

        .status-REJECTED {

            color: $status-rejected-color;

            td.registrationType, td.status {

                color: $status-rejected-color;

            }

        }

        .status-CURATION {

            color: $status-curation-color;

            td.registrationType, td.status {

                color: $status-curation-color;

            }

        }

        .status-PREPARATION {

            color: $status-preparation-color;

            td.registrationType, td.status {

                color: $status-preparation-color;

            }

        }

        .status-PUBLISHED {

            color: $status-published-color;

            td.registrationType, td.status {

                color: $status-published-color;

            }

        }

        .status-READY {

            color: $status-ready-color;

            td.registrationType, td.status {

                color: $status-ready-color;

            }

        }

    }

    // ---------------- custom components ----------------------- //

    .edit-button-group {

        margin-top: round($v-unit-size/10);

        .v-button {

            padding: 0 round($v-unit-size/4);

            height: round(2 * $v-unit-size/3 )

            // margin: 0 round($v-unit-size/4);

        }

        .v-label {

            display: inline;

            white-space: normal;

        }

    }

    // ---------- popup editor windows ---------------------------------//

    .v-window-top-toolbar {

        margin-bottom: round($v-unit-size/4);

        .v-component-group {

            float: right;

        }

    }

    #context-breadcrumbs .breadcrumbs {

      // for an explanation of how the CSS Triangles to work 

      // see https://css-tricks.com/triangle-breadcrumbs/

      $crumb-background-color: $v-app-background-color;

      $crumb-active-background-color: #3a6972; //TODO calculate using active-color and $v-background-color or $v-app-background-color

      $crumb-border-color: $v-textfield-background-color--readonly;

      $crumb-height: 10px; 

      $triangle-width: 10px; 

      $crumb-border: valo-border($color: $crumb-border-color);

      list-style: none; 

      overflow: hidden;

      margin: 0; 

      padding: 0;

      line-height: $crumb-height;

      border-radius: $v-border-radius;

      border: $crumb-border;

      li {

          float: left;

          span.crumb {

            padding: 10px 10px 10px 20px;

            background-color: $crumb-background-color;

            position: relative;

            display: block;

            float: left;

            &::before {

                  content: " "; 

                  display: block;

                  width: 0; 

                  height: 0;

                  border-left: $crumb-border;

                  border-left-width: $triangle-width;

                  border-top: $crumb-height*2 solid transparent;

                  border-bottom: $crumb-height*2 solid transparent;

                  position: absolute;

                  top: 50%;

                  margin-top: -$crumb-height*2;

                  margin-left: 1px;

                  left: 100%;

                  z-index: 1; 

              }

              &::after {

                  content: " "; 

                  display: block;

                  width: 0; 

                  height: 0;

                  border-left: $triangle-width solid $crumb-background-color;

                  border-top: $crumb-height*2 solid transparent;

                  border-bottom: $crumb-height*2 solid transparent;

                  border-right: none;

                  position: absolute;

                  top: 50%;

                  margin-top: -$crumb-height*2;

                  left: 100%;

                  z-index: 2; 

              }

          }

          &::first-child span.crumb {

            padding-left: 10px;

          }

          span.active {

              background-color: $crumb-active-background-color;

          }

       }

    }

    // ---------- ---------- //

    .v-slot-message-item {

        .date-time {

            font-weight: lighter;

        }

        .user-name {

            font-weight: bold;

        }

    }

}