Project

General

Profile

Download (13.5 KB) Statistics
| Branch: | Tag: | Revision:
1 2d703592 Andreas Kohlbecker
// 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 b6ea271c Andreas Kohlbecker
$v-font-size: 14px; // default in valo is 16px
5 2d703592 Andreas Kohlbecker
//$v-font-weight: 300;
6 15f46faf Andreas Kohlbecker
$v-font-family: "Open Sans", sans-serif;
7 2d703592 Andreas Kohlbecker
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 15f46faf Andreas Kohlbecker
// Affects the visual appearance of all component
18 2d703592 Andreas Kohlbecker
//$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 ec462234 Andreas Kohlbecker
29 1d2e0764 Andreas Kohlbecker
// $v-app-loading-text: "Dark Valo";
30 eca2b6b0 Andreas Kohlbecker
/*
31
*/
32 2d703592 Andreas Kohlbecker
$v-background-color: #444d50;
33
$v-focus-color: #07a9ca;
34
$v-focus-style: 0 0 3px 2px $v-focus-color;
35
$v-bevel-depth: 40%;
36
$v-gradient: v-linear 12%;
37
$v-border-radius: 10px;
38
$v-font-family: Roboto, sans-serif;
39
$v-font-weight: 400;
40
$v-font-weight--header: 400;
41
$v-bevel: inset 0 1px 2px v-tint, inset 0 0 1px (v-tint 0.1);
42
$v-shadow: 0 0 0 3px rgba(0,0,0,0.32), 0 1px 0 3px rgba(255,255,255,0.14);
43
$v-textfield-bevel: inset 0 2px 2px v-shade;
44
$v-textfield-shadow: $v-shadow;
45
$v-unit-size: 40px;
46
$v-overlay-shadow: 0 0 0 3px (v-shade 8), 0 5px 10px (v-shade 4);
47
$v-component-group-spacing: 6px;
48 ec462234 Andreas Kohlbecker
49 2d703592 Andreas Kohlbecker
// ========================================== //
50
51
// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
52
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples
53
54
@import "../valo/valo.scss";
55
56 dc3f8070 Andreas Kohlbecker
@import "valo-fix.scss";
57
58 2260591f Andreas Kohlbecker
@import "custom-fields.scss";
59
60 664d0a00 Andreas Kohlbecker
61
// ========================================== //
62
63
// import custom font icons TODO rename font
64
@include v-font(IcoMoon, "../../../../../fonts/icomoon");
65
66
.IcoMoon {
67 2260591f Andreas Kohlbecker
   font-family: IcoMoon;
68 664d0a00 Andreas Kohlbecker
   font-style: normal;
69
   font-weight: normal;
70
   -webkit-font-smoothing: antialiased;
71
   -moz-osx-font-smoothing: grayscale;
72
   display: inline-block;
73
   text-align: center;
74
}
75
76 af8569f7 Andreas Kohlbecker
// ========================================== //
77
// Status colors for the redistration
78
// 
79
// change-color cant be used since this is not fully supported by the vaadin sass-compiler
80
// see https://github.com/vaadin/sass-compiler/issues/147
81 bc74cf95 Andreas Kohlbecker
$status-reference-color:$v-focus-color;
82
$hue-offset: hue($status-reference-color);
83
$plain-red: adjust-color($status-reference-color, $hue: -1 * $hue-offset);  // red as 0 degree hue
84 af8569f7 Andreas Kohlbecker
$status-rejected-color: adjust-color($plain-red, $hue: 0deg);
85 5465eca0 Andreas Kohlbecker
$status-curation-color: adjust-color($plain-red, $hue: 35deg); 
86 af8569f7 Andreas Kohlbecker
$status-preparation-color: adjust-color($plain-red, $hue: 60deg); 
87
$status-published-color: adjust-color($plain-red, $hue: 105deg); 
88
$status-ready-color: adjust-color($plain-red, $hue: 180deg);
89
// ========================================== //
90
91
92 2d703592 Andreas Kohlbecker
@mixin edit-valo {
93
  @include valo;
94
95
  // Insert your own theme rules here
96 15f46faf Andreas Kohlbecker
  
97 08f24060 Andreas Kohlbecker
  // --- AbstractPageView --- // 
98
  #header {
99
    text-align: center;
100
    margin: round($v-layout-spacing-vertical/2); // corresponds to layout spacing
101
    font-size: $v-font-size--huge; // corresponds to valo style huge (26px)
102
  }
103
104
  #subheader {
105
    text-align: center;
106
    margin: round($v-layout-spacing-vertical/2);
107
    font-size: $v-font-size; // valo default font size (16px)
108
  }
109
  // ------------------- // 
110
  
111 6469b938 Andreas Kohlbecker
  .logo_giant {
112
    font-size: 400%;
113
   }
114
   
115 af8569f7 Andreas Kohlbecker
   .v-button-giant {
116 6469b938 Andreas Kohlbecker
     font-size: 32px;
117
     .v-icon {
118
       font-size: 64px;
119
       line-height: 50px;
120
     }
121
   }
122 4b501287 Andreas Kohlbecker
123
   .v-label .caption {
124
       font-size: $v-font-size--small;
125
   }
126 6469b938 Andreas Kohlbecker
   
127 ef0d6020 Andreas Kohlbecker
   // label with caption and icon horizonatally aligned
128
   // to apply this to a Vaadin Label set 'label-nowrap'
129
   // as style
130 4b501287 Andreas Kohlbecker
131
    .v-caption-label-nowrap, .v-label-label-nowrap {
132
        display: inline;
133
    }
134
    .v-label-label-nowrap {
135
//         margin-left: 8px; // TODO use sass variable here
136
//         vertical-align: baseline;
137
        .v-icon {
138
           display : inline;
139 ef0d6020 Andreas Kohlbecker
        }
140 9c553d89 Andreas Kohlbecker
    } 
141 c7627153 Andreas Kohlbecker
142
   .friendly-foreground {
143
        color: $v-friendly-color;
144
    }
145 4b501287 Andreas Kohlbecker
   
146 c7627153 Andreas Kohlbecker
   .v-button .button-badge {
147
         @include valo-badge-style($states: inactive, $background-color: lighten($v-background-color, 10%), $active-color: $v-focus-color);
148
    } 
149 ef0d6020 Andreas Kohlbecker
   
150 6469b938 Andreas Kohlbecker
   .dashboard-actions {
151
      margin: 0 10%;
152
    
153 3f1ceae0 Andreas Kohlbecker
      .dashboard-action-2 {
154
        width: 50%;
155
        .v-label {
156
            white-space: normal;
157
        }
158
      }
159 6469b938 Andreas Kohlbecker
      .dashboard-action-3 {
160
        width: 33%;
161
        .v-label {
162
            white-space: normal;
163
        }
164
      }
165
      &[width-range~="-650px"] {
166 3f1ceae0 Andreas Kohlbecker
          .dashboard-action-2, .dashboard-action-3 {
167 6469b938 Andreas Kohlbecker
              width: 100%;
168
          }
169
      }
170
    }
171 bc74cf95 Andreas Kohlbecker
172
    // ===== workflow ==== // 
173 84724c61 Andreas Kohlbecker
    
174
    #workflow {
175
        .registration-list {
176
                .v-gridlayout-slot {
177
                    border-bottom: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
178
                }
179
                .v-panel-content {
180
                    padding-left: round($v-unit-size / 4);
181
                }
182
            }
183
         .v-gridlayout-registration-list-item {
184
            padding: 0 round($v-unit-size / 4);
185
         }
186 5b4537c4 Andreas Kohlbecker
    }
187 59eb4451 Andreas Kohlbecker
    
188 bc74cf95 Andreas Kohlbecker
    $workflow-icon-size: 110px;
189
    // can not be set per css as this need to set as property to the component in vaadin
190
    $workflow-timeline-bar-height: 10px; 
191
    // the fator by which the caption should be smaller than the circe
192
    $workflow-caption-shrink: 0.64; 
193
194
    $workflow-icon-margin-h: $workflow-icon-size / 5;
195
    $workflow-icon-left: $workflow-icon-margin-h / 2;
196 5b4537c4 Andreas Kohlbecker
    $workflow-caption-font-size: $workflow-icon-size * $workflow-caption-shrink;        
197
    
198 59eb4451 Andreas Kohlbecker
    .workflow {
199
        .steps {
200
            z-index: 10;
201
            
202
            .v-csslayout {
203
                width: $workflow-icon-size + 2 * $workflow-icon-margin-h;
204
                .v-label {
205
                    display: block;
206
                    text-align: center;
207
                }
208
            }
209
         }
210
         .timeline {
211
            display: block;
212
            position: relative;
213
            top: ($workflow-icon-size / 2) + $workflow-timeline-bar-height / 2;
214
            padding: 0 $workflow-icon-size / 2;
215
            .timeline-bar {
216
                z-index: 0;
217
                background-color: $v-font-color;
218
            }
219
        }
220
    }
221 bc74cf95 Andreas Kohlbecker
222
    .workflow-item {
223
        .v-button {
224
            margin: 0 $workflow-icon-margin-h;
225
            font-size: $workflow-icon-size;
226
            height: $workflow-icon-size;
227
            width: $workflow-icon-size;
228
            line-height: $workflow-icon-size;
229
        
230
            .v-icon, .v-button-caption {
231
                position: absolute;
232
                left: $workflow-icon-left;
233
                top: 0px;
234
            }
235
            .v-button-caption {
236
                font-family: monospace;
237
                left: (($workflow-icon-size - $workflow-caption-font-size) / 2) + $workflow-icon-left; // 30px;
238
                top: -2px;
239
                color: $v-background-color;
240
                font-size: $workflow-caption-font-size; // 70px;
241
            }
242
        }
243
    }
244 84724c61 Andreas Kohlbecker
    
245
   // --------------------------------------------------- //
246 bc74cf95 Andreas Kohlbecker
247 c7627153 Andreas Kohlbecker
    #workingset {
248
            padding: round($v-unit-size / 2);
249 d7c4522d Andreas Kohlbecker
            .registration-list, .registration-list-item {
250 c7627153 Andreas Kohlbecker
                margin-top: round($v-unit-size / 2);
251
            }
252 76910e45 Andreas Kohlbecker
        
253
            .registration-list {
254
                .v-gridlayout-slot {
255
                    border-bottom: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
256
                }
257
            }
258 c7627153 Andreas Kohlbecker
    }
259
260 bc74cf95 Andreas Kohlbecker
    // --------------------------------------------------- //
261 ec462234 Andreas Kohlbecker
    
262 664d0a00 Andreas Kohlbecker
    .registration-list-item {
263 6f9eb1fe Andreas Kohlbecker
        border-top: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
264
        padding-top: 4px; // avoid button group to overlap with border
265 9773ed87 Andreas Kohlbecker
        .v-label-registration-state {
266
            margin-right: round($v-unit-size / 4);
267
        }            
268
        .v-caption-submitter {
269
            margin-right: round($v-unit-size / 8);
270
        }
271 6f9eb1fe Andreas Kohlbecker
    }
272 664d0a00 Andreas Kohlbecker
273
   .registration-workflow-item {
274
       border: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
275
    }
276
277
    // tab element being part of a process ----------- //
278 b99cbf31 Andreas Kohlbecker
    // use $v-unit-size instead of $v-font-size * 3?
279 664d0a00 Andreas Kohlbecker
    .workflow-step-wrap {
280
        padding-right: 10px;
281
        height: $v-font-size * 3;
282
        background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
283
        @include box-shadow(inset 0 0 5px $v-app-background-color);
284
    }
285
    .workflow-step {
286
        line-height: $v-font-size * 3;
287
    }
288
    .v-caption-workflow-step {
289
        vertical-align: top;
290
        padding: 0;
291
         .v-icon {
292
            line-height: $v-font-size * 3;
293
            font-size: $v-font-size * 3.5;
294
            padding-right: 10px;
295
            color: $v-background-color;
296
        }
297 b99cbf31 Andreas Kohlbecker
    }
298
299
    .workflow-tabsheet {
300
        
301
        table.v-tabsheet-tabs, .v-tabsheet-tabs tr, .v-tabsheet-tabs tbody {
302
          width: 100%; 
303
        }
304
        
305
        .v-tabsheet-tabitemcell {
306
              width: 25%;
307
        }
308
309
        .v-tabsheet-tabitem {
310
            
311
            // background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
312
            // @include valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to right);
313
            // @include box-shadow(inset 0 0 5px $v-app-background-color);
314
            // background-color: $v-font-color
315
            
316
            // border: valo-border($border: 2px solid, $color: $v-font-color, $strength: 1);
317
            
318
            background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
319
            @include box-shadow(inset 0 0 5px $v-app-background-color);
320
            border: valo-border($border: 2px solid, $color: $v-app-background-color, $strength: 1);
321
            border-color: $v-app-background-color;
322
            .v-caption {
323
                // line-height: $v-unit-size;
324
                margin: 0;
325
                padding: 0;
326
                padding-right: $v-unit-size / 2;
327
                border: 0px none;
328
            }
329
            .v-icon {
330
                line-height: $v-unit-size;
331
                font-size: $v-unit-size * 1.8;
332
                vertical-align: middle;
333
                // padding-right: $v-unit-size / 2;
334
                
335
                //color: $v-font-color;
336
                
337
                color: $v-app-background-color;
338
            }
339
        }
340 664d0a00 Andreas Kohlbecker
    }
341
342
    // ----------------------------------------------- //
343 b99cbf31 Andreas Kohlbecker
    
344
   // status colors --------------------------------- //
345 664d0a00 Andreas Kohlbecker
    .status-REJECTED {
346
        color: $status-rejected-color;
347
    }
348
    .status-CURATION {
349
        color: $status-curation-color;
350
    }
351
    .status-PREPARATION {
352
        color: $status-preparation-color;
353
    }
354
    .status-PUBLISHED {
355
        color: $status-published-color;
356
    }
357
    .status-READY {
358
        color: $status-ready-color;
359
    }
360
361
    .bg-status-REJECTED {
362
        background-color: $status-rejected-color;
363
    }
364
    .bg-status-CURATION {
365
        background-color: $status-curation-color;
366
    }
367
    .bg-status-PREPARATION {
368
        background-color: $status-preparation-color;
369
    }
370
    .bg-status-PUBLISHED {
371
        background-color: $status-published-color;
372
    }
373
    .bg-status-READY {
374
        background-color: $status-ready-color;
375
    }
376
    // ----------------------------------------------- //
377 af8569f7 Andreas Kohlbecker
    
378 ec462234 Andreas Kohlbecker
    #registration-list {
379 08f24060 Andreas Kohlbecker
        /* --- for the css layout --- */
380
        overflow: auto;
381
        height: 100%;
382
        padding-left: round($v-unit-size/3);
383
        padding-right: round($v-unit-size/3);
384
        
385
        border: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
386
        border-radius: $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0;
387
        /* ----------------------------------------------- */
388
        
389 6f9eb1fe Andreas Kohlbecker
        // for grid rows
390 5465eca0 Andreas Kohlbecker
        .status-REJECTED {
391 4b501287 Andreas Kohlbecker
            color: $status-rejected-color;
392 af8569f7 Andreas Kohlbecker
            td.registrationType, td.status {
393
                color: $status-rejected-color;
394
            }
395
        }
396 5465eca0 Andreas Kohlbecker
        .status-CURATION {
397 4b501287 Andreas Kohlbecker
            color: $status-curation-color;
398 af8569f7 Andreas Kohlbecker
            td.registrationType, td.status {
399
                color: $status-curation-color;
400
            }
401
        }
402 5465eca0 Andreas Kohlbecker
        .status-PREPARATION {
403 4b501287 Andreas Kohlbecker
            color: $status-preparation-color;
404 af8569f7 Andreas Kohlbecker
            td.registrationType, td.status {
405
                color: $status-preparation-color;
406
            }
407
        }
408 5465eca0 Andreas Kohlbecker
        .status-PUBLISHED {
409 4b501287 Andreas Kohlbecker
            color: $status-published-color;
410 af8569f7 Andreas Kohlbecker
            td.registrationType, td.status {
411
                color: $status-published-color;
412
            }
413
        }
414 5465eca0 Andreas Kohlbecker
        .status-READY {
415 4b501287 Andreas Kohlbecker
            color: $status-ready-color;
416 af8569f7 Andreas Kohlbecker
            td.registrationType, td.status {
417
                color: $status-ready-color;
418
            }
419 ec462234 Andreas Kohlbecker
        }
420 76910e45 Andreas Kohlbecker
421
    }
422
    
423
    // ---------------- custom components ----------------------- //
424
    
425
    .edit-button-group {
426
        margin-top: round($v-unit-size/10);
427
        .v-button {
428
            padding: 0 round($v-unit-size/4);
429 79295d9d Andreas Kohlbecker
            height: round(2 * $v-unit-size/3 )
430 76910e45 Andreas Kohlbecker
            // margin: 0 round($v-unit-size/4);
431
        }
432 79295d9d Andreas Kohlbecker
        .v-label {
433
            display: inline;
434
            white-space: normal;
435
        }
436 ec462234 Andreas Kohlbecker
    }
437 76910e45 Andreas Kohlbecker
    
438 fcba7787 Andreas Kohlbecker
    // ---------- popup editor windows ---------------------------------//
439
    .v-window-top-toolbar {
440
        margin-bottom: round($v-unit-size/4);
441
        .v-component-group {
442
            float: right;
443
        }
444
    }
445 15f46faf Andreas Kohlbecker
446 a6584bc2 Andreas Kohlbecker
447 2d703592 Andreas Kohlbecker
}