Project

General

Profile

Download (13.5 KB) Statistics
| Branch: | Tag: | Revision:
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: 14px; // default in valo is 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
@import "valo-fix.scss";
55

    
56
@import "custom-fields.scss";
57

    
58

    
59
// ========================================== //
60

    
61
// import custom font icons TODO rename font
62
@include v-font(IcoMoon, "../../../../../fonts/icomoon");
63

    
64
.IcoMoon {
65
   font-family: IcoMoon;
66
   font-style: normal;
67
   font-weight: normal;
68
   -webkit-font-smoothing: antialiased;
69
   -moz-osx-font-smoothing: grayscale;
70
   display: inline-block;
71
   text-align: center;
72
}
73

    
74
// ========================================== //
75
// Status colors for the redistration
76
// 
77
// change-color cant be used since this is not fully supported by the vaadin sass-compiler
78
// see https://github.com/vaadin/sass-compiler/issues/147
79
$status-reference-color:$v-focus-color;
80
$hue-offset: hue($status-reference-color);
81
$plain-red: adjust-color($status-reference-color, $hue: -1 * $hue-offset);  // red as 0 degree hue
82
$status-rejected-color: adjust-color($plain-red, $hue: 0deg);
83
$status-curation-color: adjust-color($plain-red, $hue: 35deg); 
84
$status-preparation-color: adjust-color($plain-red, $hue: 60deg); 
85
$status-published-color: adjust-color($plain-red, $hue: 105deg); 
86
$status-ready-color: adjust-color($plain-red, $hue: 180deg);
87
// ========================================== //
88

    
89

    
90
@mixin edit-valo {
91
  @include valo;
92

    
93
  // Insert your own theme rules here
94
  
95
  // --- AbstractPageView --- // 
96
  #header {
97
    text-align: center;
98
    margin: round($v-layout-spacing-vertical/2); // corresponds to layout spacing
99
    font-size: $v-font-size--huge; // corresponds to valo style huge (26px)
100
  }
101

    
102
  #subheader {
103
    text-align: center;
104
    margin: round($v-layout-spacing-vertical/2);
105
    font-size: $v-font-size; // valo default font size (16px)
106
  }
107
  // ------------------- // 
108
  
109
  .logo_giant {
110
    font-size: 400%;
111
   }
112
   
113
   .v-button-giant {
114
     font-size: 32px;
115
     .v-icon {
116
       font-size: 64px;
117
       line-height: 50px;
118
     }
119
   }
120

    
121
   .v-label .caption {
122
       font-size: $v-font-size--small;
123
   }
124
   
125
   // label with caption and icon horizonatally aligned
126
   // to apply this to a Vaadin Label set 'label-nowrap'
127
   // as style
128

    
129
    .v-caption-label-nowrap, .v-label-label-nowrap {
130
        display: inline;
131
    }
132
    .v-label-label-nowrap {
133
//         margin-left: 8px; // TODO use sass variable here
134
//         vertical-align: baseline;
135
        .v-icon {
136
           display : inline;
137
        }
138
    } 
139

    
140
   .friendly-foreground {
141
        color: $v-friendly-color;
142
    }
143
   
144
   .v-button .button-badge {
145
         @include valo-badge-style($states: inactive, $background-color: lighten($v-background-color, 10%), $active-color: $v-focus-color);
146
    } 
147
   
148
   .dashboard-actions {
149
      margin: 0 10%;
150
    
151
      .dashboard-action-2 {
152
        width: 50%;
153
        .v-label {
154
            white-space: normal;
155
        }
156
      }
157
      .dashboard-action-3 {
158
        width: 33%;
159
        .v-label {
160
            white-space: normal;
161
        }
162
      }
163
      &[width-range~="-650px"] {
164
          .dashboard-action-2, .dashboard-action-3 {
165
              width: 100%;
166
          }
167
      }
168
    }
169

    
170
    // ===== workflow ==== // 
171
    
172
    #workflow {
173
        .registration-list {
174
                .v-gridlayout-slot {
175
                    border-bottom: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
176
                }
177
                .v-panel-content {
178
                    padding-left: round($v-unit-size / 4);
179
                }
180
            }
181
         .v-gridlayout-registration-list-item {
182
            padding: 0 round($v-unit-size / 4);
183
         }
184
    }
185
    
186
    $workflow-icon-size: 110px;
187
    // can not be set per css as this need to set as property to the component in vaadin
188
    $workflow-timeline-bar-height: 10px; 
189
    // the fator by which the caption should be smaller than the circe
190
    $workflow-caption-shrink: 0.64; 
191

    
192
    $workflow-icon-margin-h: $workflow-icon-size / 5;
193
    $workflow-icon-left: $workflow-icon-margin-h / 2;
194
    $workflow-caption-font-size: $workflow-icon-size * $workflow-caption-shrink;        
195
    
196
    .workflow {
197
        .steps {
198
            z-index: 10;
199
            
200
            .v-csslayout {
201
                width: $workflow-icon-size + 2 * $workflow-icon-margin-h;
202
                .v-label {
203
                    display: block;
204
                    text-align: center;
205
                }
206
            }
207
         }
208
         .timeline {
209
            display: block;
210
            position: relative;
211
            top: ($workflow-icon-size / 2) + $workflow-timeline-bar-height / 2;
212
            padding: 0 $workflow-icon-size / 2;
213
            .timeline-bar {
214
                z-index: 0;
215
                background-color: $v-font-color;
216
            }
217
        }
218
    }
219

    
220
    .workflow-item {
221
        .v-button {
222
            margin: 0 $workflow-icon-margin-h;
223
            font-size: $workflow-icon-size;
224
            height: $workflow-icon-size;
225
            width: $workflow-icon-size;
226
            line-height: $workflow-icon-size;
227
        
228
            .v-icon, .v-button-caption {
229
                position: absolute;
230
                left: $workflow-icon-left;
231
                top: 0px;
232
            }
233
            .v-button-caption {
234
                font-family: monospace;
235
                left: (($workflow-icon-size - $workflow-caption-font-size) / 2) + $workflow-icon-left; // 30px;
236
                top: -2px;
237
                color: $v-background-color;
238
                font-size: $workflow-caption-font-size; // 70px;
239
            }
240
        }
241
    }
242
    
243
   // --------------------------------------------------- //
244

    
245
    #workingset {
246
            padding: round($v-unit-size / 2);
247
            .registration-list, .registration-list-item {
248
                margin-top: round($v-unit-size / 2);
249
            }
250
        
251
            .registration-list {
252
                .v-gridlayout-slot {
253
                    border-bottom: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
254
                }
255
            }
256
    }
257

    
258
    // --------------------------------------------------- //
259
    
260
    .registration-list-item {
261
        border-top: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
262
        padding-top: 4px; // avoid button group to overlap with border
263
        .v-label-registration-state {
264
            margin-right: round($v-unit-size / 4);
265
        }            
266
        .v-caption-submitter {
267
            margin-right: round($v-unit-size / 8);
268
        }
269
    }
270

    
271
   .registration-workflow-item {
272
       border: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
273
    }
274

    
275
    // tab element being part of a process ----------- //
276
    // use $v-unit-size instead of $v-font-size * 3?
277
    .workflow-step-wrap {
278
        padding-right: 10px;
279
        height: $v-font-size * 3;
280
        background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
281
        @include box-shadow(inset 0 0 5px $v-app-background-color);
282
    }
283
    .workflow-step {
284
        line-height: $v-font-size * 3;
285
    }
286
    .v-caption-workflow-step {
287
        vertical-align: top;
288
        padding: 0;
289
         .v-icon {
290
            line-height: $v-font-size * 3;
291
            font-size: $v-font-size * 3.5;
292
            padding-right: 10px;
293
            color: $v-background-color;
294
        }
295
    }
296

    
297
    .workflow-tabsheet {
298
        
299
        table.v-tabsheet-tabs, .v-tabsheet-tabs tr, .v-tabsheet-tabs tbody {
300
          width: 100%; 
301
        }
302
        
303
        .v-tabsheet-tabitemcell {
304
              width: 25%;
305
        }
306

    
307
        .v-tabsheet-tabitem {
308
            
309
            // background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
310
            // @include valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to right);
311
            // @include box-shadow(inset 0 0 5px $v-app-background-color);
312
            // background-color: $v-font-color
313
            
314
            // border: valo-border($border: 2px solid, $color: $v-font-color, $strength: 1);
315
            
316
            background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
317
            @include box-shadow(inset 0 0 5px $v-app-background-color);
318
            border: valo-border($border: 2px solid, $color: $v-app-background-color, $strength: 1);
319
            border-color: $v-app-background-color;
320
            .v-caption {
321
                // line-height: $v-unit-size;
322
                margin: 0;
323
                padding: 0;
324
                padding-right: $v-unit-size / 2;
325
                border: 0px none;
326
            }
327
            .v-icon {
328
                line-height: $v-unit-size;
329
                font-size: $v-unit-size * 1.8;
330
                vertical-align: middle;
331
                // padding-right: $v-unit-size / 2;
332
                
333
                //color: $v-font-color;
334
                
335
                color: $v-app-background-color;
336
            }
337
        }
338
    }
339

    
340
    // ----------------------------------------------- //
341
    
342
   // status colors --------------------------------- //
343
    .status-REJECTED {
344
        color: $status-rejected-color;
345
    }
346
    .status-CURATION {
347
        color: $status-curation-color;
348
    }
349
    .status-PREPARATION {
350
        color: $status-preparation-color;
351
    }
352
    .status-PUBLISHED {
353
        color: $status-published-color;
354
    }
355
    .status-READY {
356
        color: $status-ready-color;
357
    }
358

    
359
    .bg-status-REJECTED {
360
        background-color: $status-rejected-color;
361
    }
362
    .bg-status-CURATION {
363
        background-color: $status-curation-color;
364
    }
365
    .bg-status-PREPARATION {
366
        background-color: $status-preparation-color;
367
    }
368
    .bg-status-PUBLISHED {
369
        background-color: $status-published-color;
370
    }
371
    .bg-status-READY {
372
        background-color: $status-ready-color;
373
    }
374
    // ----------------------------------------------- //
375
    
376
    #registration-list {
377
        /* --- for the css layout --- */
378
        overflow: auto;
379
        height: 100%;
380
        padding-left: round($v-unit-size/3);
381
        padding-right: round($v-unit-size/3);
382
        
383
        border: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
384
        border-radius: $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0;
385
        /* ----------------------------------------------- */
386
        
387
        // for grid rows
388
        .status-REJECTED {
389
            color: $status-rejected-color;
390
            td.registrationType, td.status {
391
                color: $status-rejected-color;
392
            }
393
        }
394
        .status-CURATION {
395
            color: $status-curation-color;
396
            td.registrationType, td.status {
397
                color: $status-curation-color;
398
            }
399
        }
400
        .status-PREPARATION {
401
            color: $status-preparation-color;
402
            td.registrationType, td.status {
403
                color: $status-preparation-color;
404
            }
405
        }
406
        .status-PUBLISHED {
407
            color: $status-published-color;
408
            td.registrationType, td.status {
409
                color: $status-published-color;
410
            }
411
        }
412
        .status-READY {
413
            color: $status-ready-color;
414
            td.registrationType, td.status {
415
                color: $status-ready-color;
416
            }
417
        }
418

    
419
    }
420
    
421
    // ---------------- custom components ----------------------- //
422
    
423
    .edit-button-group {
424
        margin-top: round($v-unit-size/10);
425
        .v-button {
426
            padding: 0 round($v-unit-size/4);
427
            height: round(2 * $v-unit-size/3 )
428
            // margin: 0 round($v-unit-size/4);
429
        }
430
        .v-label {
431
            display: inline;
432
            white-space: normal;
433
        }
434
    }
435
    
436
    // ---------- popup editor windows ---------------------------------//
437
    .v-window-top-toolbar {
438
        margin-bottom: round($v-unit-size/4);
439
        .v-component-group {
440
            float: right;
441
        }
442
    }
443

    
444

    
445
}
(3-3/5)