src/main/webapp/VAADIN/themes/edit-valo/edit-valo.scss

   1 // Global variable overrides. Must be declared before importing Valo.
   2
   3 // Defines the plaintext font size, weight and family. Font size affects general component sizing.
   4 //$v-font-size: 16px;
   5 //$v-font-weight: 300;
   6 $v-font-family: "Open Sans", sans-serif;
   7
   8 // Defines the border used by all components.
   9 //$v-border: 1px solid (v-shade 0.7);
  10 //$v-border-radius: 4px;
  11
  12 // Affects the color of some component elements, e.g Button, Panel title, etc
  13 //$v-background-color: hsl(210, 0%, 98%);
  14 // Affects the color of content areas, e.g  Panel and Window content, TextField input etc
  15 //$v-app-background-color: $v-background-color;
  16
  17 // Affects the visual appearance of all component
  18 //$v-gradient: v-linear 8%;
  19 //$v-bevel-depth: 30%;
  20 //$v-shadow-opacity: 5%;
  21
  22 // Defines colors for indicating status (focus, success, failure)
  23 //$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
  24 //$v-friendly-color: #2c9720;
  25 //$v-error-indicator-color: #ed473b;
  26
  27 // ================== DARK ================ //
  28
  29 $v-app-loading-text: "Dark Valo";
  30 $v-background-color: #444d50;
  31 $v-focus-color: #07a9ca;
  32 $v-focus-style: 0 0 3px 2px $v-focus-color;
  33 $v-bevel-depth: 40%;
  34 $v-gradient: v-linear 12%;
  35 $v-border-radius: 10px;
  36 $v-font-family: Roboto, sans-serif;
  37 $v-font-weight: 400;
  38 $v-font-weight--header: 400;
  39 $v-bevel: inset 0 1px 2px v-tint, inset 0 0 1px (v-tint 0.1);
  40 $v-shadow: 0 0 0 3px rgba(0,0,0,0.32), 0 1px 0 3px rgba(255,255,255,0.14);
  41 $v-textfield-bevel: inset 0 2px 2px v-shade;
  42 $v-textfield-shadow: $v-shadow;
  43 $v-unit-size: 40px;
  44 $v-overlay-shadow: 0 0 0 3px (v-shade 8), 0 5px 10px (v-shade 4);
  45 $v-component-group-spacing: 6px;
  46
  47 // ========================================== //
  48
  49 // For more information, see: https://vaadin.com/book/-/page/themes.valo.html
  50 // Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples
  51
  52 @import "../valo/valo.scss";
  53
  54 // ========================================== //
  55 // Status colors for the redistration
  56 //
  57 // change-color cant be used since this is not fully supported by the vaadin sass-compiler
  58 // see https://github.com/vaadin/sass-compiler/issues/147
  59 $status-reference-color:$v-focus-color;
  60 $hue-offset: hue($status-reference-color);
  61 $plain-red: adjust-color($status-reference-color, $hue: -1 * $hue-offset);  // red as 0 degree hue
  62 $status-rejected-color: adjust-color($plain-red, $hue: 0deg);
  63 $status-curation-color: adjust-color($plain-red, $hue: 35deg);
  64 $status-preparation-color: adjust-color($plain-red, $hue: 60deg);
  65 $status-published-color: adjust-color($plain-red, $hue: 105deg);
  66 $status-ready-color: adjust-color($plain-red, $hue: 180deg);
  67 // ========================================== //
  68
  69
  70 @mixin edit-valo {
  71   @include valo;
  72
  73   // Insert your own theme rules here
  74
  75   // --- AbstractPageView --- //
  76   #header {
  77     text-align: center;
  78     margin: round($v-layout-spacing-vertical/2); // corresponds to layout spacing
  79     font-size: $v-font-size--huge; // corresponds to valo style huge (26px)
  80   }
  81
  82   #subheader {
  83     text-align: center;
  84     margin: round($v-layout-spacing-vertical/2);
  85     font-size: $v-font-size; // valo default font size (16px)
  86   }
  87   // ------------------- //
  88
  89   .logo_giant {
  90     font-size: 400%;
  91    }
  92
  93    .v-button-giant {
  94      font-size: 32px;
  95      .v-icon {
  96        font-size: 64px;
  97        line-height: 50px;
  98      }
  99    }
 100
 101    .v-label .caption {
 102        font-size: $v-font-size--small;
 103    }
 104
 105    // label with caption and icon horizonatally aligned
 106    // to apply this to a Vaadin Label set 'label-nowrap'
 107    // as style
 108
 109     .v-caption-label-nowrap, .v-label-label-nowrap {
 110         display: inline;
 111     }
 112     .v-label-label-nowrap {
 113 //         margin-left: 8px; // TODO use sass variable here
 114 //         vertical-align: baseline;
 115         .v-icon {
 116            display : inline;
 117         }
 118     }
 119
 120
 121    .dashboard-actions {
 122       margin: 0 10%;
 123
 124       .dashboard-action-2 {
 125         width: 50%;
 126         .v-label {
 127             white-space: normal;
 128         }
 129       }
 130       .dashboard-action-3 {
 131         width: 33%;
 132         .v-label {
 133             white-space: normal;
 134         }
 135       }
 136       &[width-range~="-650px"] {
 137           .dashboard-action-2, .dashboard-action-3 {
 138               width: 100%;
 139           }
 140       }
 141     }
 142
 143     // ===== workflow ==== //
 144
 145     #workflow-container {
 146         text-align: center;
 147     }
 148
 149     $workflow-icon-size: 110px;
 150     // can not be set per css as this need to set as property to the component in vaadin
 151     $workflow-timeline-bar-height: 10px;
 152     // the fator by which the caption should be smaller than the circe
 153     $workflow-caption-shrink: 0.64;
 154
 155     $workflow-icon-margin-h: $workflow-icon-size / 5;
 156     $workflow-icon-left: $workflow-icon-margin-h / 2;
 157     $workflow-caption-font-size: $workflow-icon-size * $workflow-caption-shrink;
 158
 159     .workflow {
 160         .steps {
 161             z-index: 10;
 162
 163             .v-csslayout {
 164                 width: $workflow-icon-size + 2 * $workflow-icon-margin-h;
 165                 .v-label {
 166                     display: block;
 167                     text-align: center;
 168                 }
 169             }
 170          }
 171          .timeline {
 172             display: block;
 173             position: relative;
 174             top: ($workflow-icon-size / 2) + $workflow-timeline-bar-height / 2;
 175             padding: 0 $workflow-icon-size / 2;
 176             .timeline-bar {
 177                 z-index: 0;
 178                 background-color: $v-font-color;
 179             }
 180         }
 181     }
 182
 183     .workflow-item {
 184         .v-button {
 185             margin: 0 $workflow-icon-margin-h;
 186             font-size: $workflow-icon-size;
 187             height: $workflow-icon-size;
 188             width: $workflow-icon-size;
 189             line-height: $workflow-icon-size;
 190
 191             .v-icon, .v-button-caption {
 192                 position: absolute;
 193                 left: $workflow-icon-left;
 194                 top: 0px;
 195             }
 196             .v-button-caption {
 197                 font-family: monospace;
 198                 left: (($workflow-icon-size - $workflow-caption-font-size) / 2) + $workflow-icon-left; // 30px;
 199                 top: -2px;
 200                 color: $v-background-color;
 201                 font-size: $workflow-caption-font-size; // 70px;
 202             }
 203         }
 204     }
 205
 206     // --------------------------------------------------- //
 207
 208     .registration-item {
 209         border-top: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
 210         padding-top: 4px; // avoid button group to overlap with border
 211     }
 212
 213     #registration-list {
 214         /* --- for the css layout --- */
 215         overflow: auto;
 216         height: 100%;
 217         padding-left: round($v-unit-size/3);
 218         padding-right: round($v-unit-size/3);
 219
 220         border: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
 221         border-radius: $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0;
 222         /* ----------------------------------------------- */
 223
 224         // for grid rows
 225         .status-REJECTED {
 226             color: $status-rejected-color;
 227             td.registrationType, td.status {
 228                 color: $status-rejected-color;
 229             }
 230         }
 231         .status-CURATION {
 232             color: $status-curation-color;
 233             td.registrationType, td.status {
 234                 color: $status-curation-color;
 235             }
 236         }
 237         .status-PREPARATION {
 238             color: $status-preparation-color;
 239             td.registrationType, td.status {
 240                 color: $status-preparation-color;
 241             }
 242         }
 243         .status-PUBLISHED {
 244             color: $status-published-color;
 245             td.registrationType, td.status {
 246                 color: $status-published-color;
 247             }
 248         }
 249         .status-READY {
 250             color: $status-ready-color;
 251             td.registrationType, td.status {
 252                 color: $status-ready-color;
 253             }
 254         }
 255         // for RegistrationItems
 256         .v-caption-status-REJECTED {
 257             color: $status-rejected-color;
 258         }
 259         .v-caption-status-CURATION {
 260             color: $status-curation-color;
 261         }
 262         .v-caption-status-PREPARATION {
 263             color: $status-preparation-color;
 264         }
 265         .v-caption-status-PUBLISHED {
 266             color: $status-published-color;
 267         }
 268         .v-caption-status-READY {
 269             color: $status-ready-color;
 270         }
 271     }
 272
 273
 274 }