Project

General

Profile

Download (17.3 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 403a0ebd Andreas Kohlbecker
// $edit-v-shadow-spread-radius: 0px; // default
28 2d703592 Andreas Kohlbecker
// ================== DARK ================ //
29 ec462234 Andreas Kohlbecker
30 1d2e0764 Andreas Kohlbecker
// $v-app-loading-text: "Dark Valo";
31 eca2b6b0 Andreas Kohlbecker
/*
32
*/
33 403a0ebd Andreas Kohlbecker
$edit-v-shadow-spread-radius: 3px;
34 2d703592 Andreas Kohlbecker
$v-background-color: #444d50;
35
$v-focus-color: #07a9ca;
36
$v-focus-style: 0 0 3px 2px $v-focus-color;
37
$v-bevel-depth: 40%;
38
$v-gradient: v-linear 12%;
39
$v-border-radius: 10px;
40
$v-font-family: Roboto, sans-serif;
41
$v-font-weight: 400;
42
$v-font-weight--header: 400;
43
$v-bevel: inset 0 1px 2px v-tint, inset 0 0 1px (v-tint 0.1);
44 403a0ebd Andreas Kohlbecker
$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);
45 2d703592 Andreas Kohlbecker
$v-textfield-bevel: inset 0 2px 2px v-shade;
46
$v-textfield-shadow: $v-shadow;
47
$v-unit-size: 40px;
48
$v-overlay-shadow: 0 0 0 3px (v-shade 8), 0 5px 10px (v-shade 4);
49
$v-component-group-spacing: 6px;
50 ec462234 Andreas Kohlbecker
51 2d703592 Andreas Kohlbecker
// ========================================== //
52
53
// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
54
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples
55
56
@import "../valo/valo.scss";
57
58 dc3f8070 Andreas Kohlbecker
@import "valo-fix.scss";
59
60 2260591f Andreas Kohlbecker
@import "custom-fields.scss";
61
62 664d0a00 Andreas Kohlbecker
63
// ========================================== //
64
65
// import custom font icons TODO rename font
66
@include v-font(IcoMoon, "../../../../../fonts/icomoon");
67
68
.IcoMoon {
69 2260591f Andreas Kohlbecker
   font-family: IcoMoon;
70 664d0a00 Andreas Kohlbecker
   font-style: normal;
71
   font-weight: normal;
72
   -webkit-font-smoothing: antialiased;
73
   -moz-osx-font-smoothing: grayscale;
74
   display: inline-block;
75
   text-align: center;
76
}
77
78 af8569f7 Andreas Kohlbecker
// ========================================== //
79 725d1ff2 Andreas Kohlbecker
// Status colors for the registration
80 af8569f7 Andreas Kohlbecker
// 
81
// change-color cant be used since this is not fully supported by the vaadin sass-compiler
82
// see https://github.com/vaadin/sass-compiler/issues/147
83 bc74cf95 Andreas Kohlbecker
$status-reference-color:$v-focus-color;
84
$hue-offset: hue($status-reference-color);
85
$plain-red: adjust-color($status-reference-color, $hue: -1 * $hue-offset);  // red as 0 degree hue
86 af8569f7 Andreas Kohlbecker
$status-rejected-color: adjust-color($plain-red, $hue: 0deg);
87 5465eca0 Andreas Kohlbecker
$status-curation-color: adjust-color($plain-red, $hue: 35deg); 
88 af8569f7 Andreas Kohlbecker
$status-preparation-color: adjust-color($plain-red, $hue: 60deg); 
89
$status-published-color: adjust-color($plain-red, $hue: 105deg); 
90
$status-ready-color: adjust-color($plain-red, $hue: 180deg);
91
// ========================================== //
92
93 725d1ff2 Andreas Kohlbecker
@mixin registration-status-colors($sub-selector: '') {
94
    .registration-status-REJECTED #{$sub-selector} {
95
        color: $status-rejected-color;
96
    }
97
    .registration-status-CURATION #{$sub-selector} {
98
        color: $status-curation-color;
99
    }
100
    .registration-status-PREPARATION #{$sub-selector} {
101
        color: $status-preparation-color;
102
    }
103
    .registration-status-PUBLISHED #{$sub-selector} {
104
        color: $status-published-color;
105
    }
106
    .registration-status-READY #{$sub-selector} {
107
        color: $status-ready-color;
108
    }
109
}
110
111
@mixin registration-status-bg-colors($sub-selector: '') {
112
    .bg-status-REJECTED #{$sub-selector} {
113
        background-color: $status-rejected-color;
114
    }
115
    .bg-status-CURATION #{$sub-selector} {
116
        background-color: $status-curation-color;
117
    }
118
    .bg-status-PREPARATION #{$sub-selector}  {
119
        background-color: $status-preparation-color;
120
    }
121
    .bg-status-PUBLISHED #{$sub-selector} {
122
        background-color: $status-published-color;
123
    }
124
    .bg-status-READY #{$sub-selector} {
125
        background-color: $status-ready-color;
126
    }
127
}
128
129
130 af8569f7 Andreas Kohlbecker
131 2d703592 Andreas Kohlbecker
@mixin edit-valo {
132
  @include valo;
133
134
  // Insert your own theme rules here
135 15f46faf Andreas Kohlbecker
  
136 08f24060 Andreas Kohlbecker
  // --- AbstractPageView --- // 
137
  #header {
138
    text-align: center;
139
    margin: round($v-layout-spacing-vertical/2); // corresponds to layout spacing
140
    font-size: $v-font-size--huge; // corresponds to valo style huge (26px)
141
  }
142
143
  #subheader {
144
    text-align: center;
145
    margin: round($v-layout-spacing-vertical/2);
146
    font-size: $v-font-size; // valo default font size (16px)
147
  }
148
  // ------------------- // 
149
  
150 6469b938 Andreas Kohlbecker
  .logo_giant {
151
    font-size: 400%;
152
   }
153
   
154 af8569f7 Andreas Kohlbecker
   .v-button-giant {
155 6469b938 Andreas Kohlbecker
     font-size: 32px;
156
     .v-icon {
157
       font-size: 64px;
158
       line-height: 50px;
159
     }
160
   }
161 adad0cac Andreas Kohlbecker
   
162
   .v-button-center-h {
163
    // requires width to be defined 
164
    display: block;
165
    margin: 0 auto;
166
   }
167 4b501287 Andreas Kohlbecker
168
   .v-label .caption {
169
       font-size: $v-font-size--small;
170
   }
171 6469b938 Andreas Kohlbecker
   
172 ef0d6020 Andreas Kohlbecker
   // label with caption and icon horizonatally aligned
173
   // to apply this to a Vaadin Label set 'label-nowrap'
174
   // as style
175 4b501287 Andreas Kohlbecker
176
    .v-caption-label-nowrap, .v-label-label-nowrap {
177
        display: inline;
178
    }
179
    .v-label-label-nowrap {
180
//         margin-left: 8px; // TODO use sass variable here
181
//         vertical-align: baseline;
182
        .v-icon {
183
           display : inline;
184 ef0d6020 Andreas Kohlbecker
        }
185 9c553d89 Andreas Kohlbecker
    } 
186 c7627153 Andreas Kohlbecker
187
   .friendly-foreground {
188
        color: $v-friendly-color;
189
    }
190 4b501287 Andreas Kohlbecker
   
191 c7627153 Andreas Kohlbecker
   .v-button .button-badge {
192
         @include valo-badge-style($states: inactive, $background-color: lighten($v-background-color, 10%), $active-color: $v-focus-color);
193
    } 
194 ef0d6020 Andreas Kohlbecker
   
195 6469b938 Andreas Kohlbecker
   .dashboard-actions {
196
      margin: 0 10%;
197
    
198 3f1ceae0 Andreas Kohlbecker
      .dashboard-action-2 {
199
        width: 50%;
200
        .v-label {
201
            white-space: normal;
202
        }
203
      }
204 6469b938 Andreas Kohlbecker
      .dashboard-action-3 {
205
        width: 33%;
206
        .v-label {
207
            white-space: normal;
208
        }
209
      }
210
      &[width-range~="-650px"] {
211 3f1ceae0 Andreas Kohlbecker
          .dashboard-action-2, .dashboard-action-3 {
212 6469b938 Andreas Kohlbecker
              width: 100%;
213
          }
214
      }
215
    }
216 1affb934 Andreas Kohlbecker
    
217
    // ==== styles in eu.etaxonomy.cdm.vaadin.theme.EditValoTheme ==== // 
218
    
219
    // style for buttons highlighted as being active
220
    .v-button-highlite {
221
        color: $v-focus-color;
222
    }
223
    
224
    .v-panel-padding-left .v-panel-content {
225
        padding-left: round($v-unit-size / 4);
226
    }
227 a7612c19 Andreas Kohlbecker
    
228
     .v-select-optiongroup-optiongroup-caption-fix {
229
        margin-left: round($v-unit-size / 4);
230
     }
231 bc74cf95 Andreas Kohlbecker
232
    // ===== workflow ==== // 
233 84724c61 Andreas Kohlbecker
    
234
    #workflow {
235
        .registration-list {
236
                .v-gridlayout-slot {
237
                    border-bottom: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
238
                }
239
            }
240
         .v-gridlayout-registration-list-item {
241
            padding: 0 round($v-unit-size / 4);
242
         }
243 5b4537c4 Andreas Kohlbecker
    }
244 59eb4451 Andreas Kohlbecker
    
245 bc74cf95 Andreas Kohlbecker
    $workflow-icon-size: 110px;
246
    // can not be set per css as this need to set as property to the component in vaadin
247
    $workflow-timeline-bar-height: 10px; 
248
    // the fator by which the caption should be smaller than the circe
249
    $workflow-caption-shrink: 0.64; 
250
251
    $workflow-icon-margin-h: $workflow-icon-size / 5;
252
    $workflow-icon-left: $workflow-icon-margin-h / 2;
253 5b4537c4 Andreas Kohlbecker
    $workflow-caption-font-size: $workflow-icon-size * $workflow-caption-shrink;        
254
    
255 59eb4451 Andreas Kohlbecker
    .workflow {
256
        .steps {
257
            z-index: 10;
258
            
259
            .v-csslayout {
260
                width: $workflow-icon-size + 2 * $workflow-icon-margin-h;
261
                .v-label {
262
                    display: block;
263
                    text-align: center;
264
                }
265
            }
266
         }
267
         .timeline {
268
            display: block;
269
            position: relative;
270
            top: ($workflow-icon-size / 2) + $workflow-timeline-bar-height / 2;
271
            padding: 0 $workflow-icon-size / 2;
272
            .timeline-bar {
273
                z-index: 0;
274
                background-color: $v-font-color;
275
            }
276
        }
277
    }
278 bc74cf95 Andreas Kohlbecker
279
    .workflow-item {
280
        .v-button {
281
            margin: 0 $workflow-icon-margin-h;
282
            font-size: $workflow-icon-size;
283
            height: $workflow-icon-size;
284
            width: $workflow-icon-size;
285
            line-height: $workflow-icon-size;
286
        
287
            .v-icon, .v-button-caption {
288
                position: absolute;
289
                left: $workflow-icon-left;
290
                top: 0px;
291
            }
292
            .v-button-caption {
293
                font-family: monospace;
294
                left: (($workflow-icon-size - $workflow-caption-font-size) / 2) + $workflow-icon-left; // 30px;
295
                top: -2px;
296
                color: $v-background-color;
297
                font-size: $workflow-caption-font-size; // 70px;
298
            }
299
        }
300
    }
301 84724c61 Andreas Kohlbecker
    
302 ee7eb9e7 Andreas Kohlbecker
   
303 84724c61 Andreas Kohlbecker
   // --------------------------------------------------- //
304 bc74cf95 Andreas Kohlbecker
305 c7627153 Andreas Kohlbecker
    #workingset {
306
            padding: round($v-unit-size / 2);
307 d7c4522d Andreas Kohlbecker
            .registration-list, .registration-list-item {
308 c7627153 Andreas Kohlbecker
                margin-top: round($v-unit-size / 2);
309
            }
310 76910e45 Andreas Kohlbecker
        
311 699de23b Andreas Kohlbecker
            .v-panel-content {
312
                padding: 0 round($v-unit-size/3);
313
            }
314
            .registration-list .item-footer {
315
                border-bottom: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
316 76910e45 Andreas Kohlbecker
            }
317 c7627153 Andreas Kohlbecker
    }
318
319 bc74cf95 Andreas Kohlbecker
    // --------------------------------------------------- //
320 adb55b39 Andreas Kohlbecker
    .v-caption-submitter {
321
            margin-right: round($v-unit-size / 8);
322
    }
323
        
324 664d0a00 Andreas Kohlbecker
    .registration-list-item {
325 0773de61 Andreas Kohlbecker
        border-bottom: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
326 6f9eb1fe Andreas Kohlbecker
        padding-top: 4px; // avoid button group to overlap with border
327 9773ed87 Andreas Kohlbecker
        .v-label-registration-state {
328
            margin-right: round($v-unit-size / 4);
329
        }            
330 adb55b39 Andreas Kohlbecker
        
331 6f9eb1fe Andreas Kohlbecker
    }
332 664d0a00 Andreas Kohlbecker
333
   .registration-workflow-item {
334
       border: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
335
    }
336
337
    // tab element being part of a process ----------- //
338 b99cbf31 Andreas Kohlbecker
    // use $v-unit-size instead of $v-font-size * 3?
339 664d0a00 Andreas Kohlbecker
    .workflow-step-wrap {
340
        padding-right: 10px;
341
        height: $v-font-size * 3;
342
        background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
343
        @include box-shadow(inset 0 0 5px $v-app-background-color);
344
    }
345
    .workflow-step {
346
        line-height: $v-font-size * 3;
347
    }
348
    .v-caption-workflow-step {
349
        vertical-align: top;
350
        padding: 0;
351
         .v-icon {
352
            line-height: $v-font-size * 3;
353
            font-size: $v-font-size * 3.5;
354
            padding-right: 10px;
355
            color: $v-background-color;
356
        }
357 b99cbf31 Andreas Kohlbecker
    }
358
359
    .workflow-tabsheet {
360
        
361
        table.v-tabsheet-tabs, .v-tabsheet-tabs tr, .v-tabsheet-tabs tbody {
362
          width: 100%; 
363
        }
364
        
365
        .v-tabsheet-tabitemcell {
366
              width: 25%;
367
        }
368
369
        .v-tabsheet-tabitem {
370
            
371
            // background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
372
            // @include valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to right);
373
            // @include box-shadow(inset 0 0 5px $v-app-background-color);
374
            // background-color: $v-font-color
375
            
376
            // border: valo-border($border: 2px solid, $color: $v-font-color, $strength: 1);
377
            
378
            background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
379
            @include box-shadow(inset 0 0 5px $v-app-background-color);
380
            border: valo-border($border: 2px solid, $color: $v-app-background-color, $strength: 1);
381
            border-color: $v-app-background-color;
382
            .v-caption {
383
                // line-height: $v-unit-size;
384
                margin: 0;
385
                padding: 0;
386
                padding-right: $v-unit-size / 2;
387
                border: 0px none;
388
            }
389
            .v-icon {
390
                line-height: $v-unit-size;
391
                font-size: $v-unit-size * 1.8;
392
                vertical-align: middle;
393
                // padding-right: $v-unit-size / 2;
394
                
395
                //color: $v-font-color;
396
                
397
                color: $v-app-background-color;
398
            }
399
        }
400 664d0a00 Andreas Kohlbecker
    }
401
402 adb55b39 Andreas Kohlbecker
    // =============================================== //
403
    .registration-status {
404
        display: block;
405
    }
406 b99cbf31 Andreas Kohlbecker
    
407 725d1ff2 Andreas Kohlbecker
   @include registration-status-colors();
408
   @include registration-status-bg-colors(); // TODO still needed?
409
   @include registration-status-colors(.v-select-select);
410
   
411 664d0a00 Andreas Kohlbecker
    // ----------------------------------------------- //
412 af8569f7 Andreas Kohlbecker
    
413 ec462234 Andreas Kohlbecker
    #registration-list {
414 08f24060 Andreas Kohlbecker
        /* --- for the css layout --- */
415
        overflow: auto;
416
        height: 100%;
417
        padding-left: round($v-unit-size/3);
418
        padding-right: round($v-unit-size/3);
419
        
420
        border: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
421
        border-radius: $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0;
422
        /* ----------------------------------------------- */
423 725d1ff2 Andreas Kohlbecker
        // TODO can the mixin registration-status-colors() be used here?
424 6f9eb1fe Andreas Kohlbecker
        // for grid rows
425 5465eca0 Andreas Kohlbecker
        .status-REJECTED {
426 4b501287 Andreas Kohlbecker
            color: $status-rejected-color;
427 af8569f7 Andreas Kohlbecker
            td.registrationType, td.status {
428
                color: $status-rejected-color;
429
            }
430
        }
431 5465eca0 Andreas Kohlbecker
        .status-CURATION {
432 4b501287 Andreas Kohlbecker
            color: $status-curation-color;
433 af8569f7 Andreas Kohlbecker
            td.registrationType, td.status {
434
                color: $status-curation-color;
435
            }
436
        }
437 5465eca0 Andreas Kohlbecker
        .status-PREPARATION {
438 4b501287 Andreas Kohlbecker
            color: $status-preparation-color;
439 af8569f7 Andreas Kohlbecker
            td.registrationType, td.status {
440
                color: $status-preparation-color;
441
            }
442
        }
443 5465eca0 Andreas Kohlbecker
        .status-PUBLISHED {
444 4b501287 Andreas Kohlbecker
            color: $status-published-color;
445 af8569f7 Andreas Kohlbecker
            td.registrationType, td.status {
446
                color: $status-published-color;
447
            }
448
        }
449 5465eca0 Andreas Kohlbecker
        .status-READY {
450 4b501287 Andreas Kohlbecker
            color: $status-ready-color;
451 af8569f7 Andreas Kohlbecker
            td.registrationType, td.status {
452
                color: $status-ready-color;
453
            }
454 ec462234 Andreas Kohlbecker
        }
455 76910e45 Andreas Kohlbecker
456
    }
457
    
458
    // ---------------- custom components ----------------------- //
459
    
460
    .edit-button-group {
461
        margin-top: round($v-unit-size/10);
462
        .v-button {
463
            padding: 0 round($v-unit-size/4);
464 79295d9d Andreas Kohlbecker
            height: round(2 * $v-unit-size/3 )
465 76910e45 Andreas Kohlbecker
            // margin: 0 round($v-unit-size/4);
466
        }
467 79295d9d Andreas Kohlbecker
        .v-label {
468
            display: inline;
469
            white-space: normal;
470
        }
471 ec462234 Andreas Kohlbecker
    }
472 76910e45 Andreas Kohlbecker
    
473 fcba7787 Andreas Kohlbecker
    // ---------- popup editor windows ---------------------------------//
474
    .v-window-top-toolbar {
475
        margin-bottom: round($v-unit-size/4);
476
        .v-component-group {
477
            float: right;
478
        }
479
    }
480 1a836a82 Andreas Kohlbecker
    
481 ae69029f Andreas Kohlbecker
    #context-breadcrumbs .breadcrumbs {
482
      // for an explanation of how the CSS Triangles to work 
483
      // see https://css-tricks.com/triangle-breadcrumbs/
484
    
485
      $crumb-background-color: $v-app-background-color;
486
      $crumb-active-background-color: #3a6972; //TODO calculate using active-color and $v-background-color or $v-app-background-color
487
      $crumb-border-color: $v-textfield-background-color--readonly;
488
      $crumb-height: 10px; 
489
      $triangle-width: 10px; 
490
      
491
      $crumb-border: valo-border($color: $crumb-border-color);
492
      
493
      list-style: none; 
494
      overflow: hidden;
495
      margin: 0; 
496
      padding: 0;
497
      line-height: $crumb-height;
498
      border-radius: $v-border-radius;
499
      border: $crumb-border;
500
      li {
501
          float: left;
502
          span.crumb {
503
            padding: 10px 10px 10px 20px;
504
            background-color: $crumb-background-color;
505
            position: relative;
506
            display: block;
507
            float: left;
508
            &::before {
509
                  content: " "; 
510
                  display: block;
511
                  width: 0; 
512
                  height: 0;
513
                  border-left: $crumb-border;
514
                  border-left-width: $triangle-width;
515
                  border-top: $crumb-height*2 solid transparent;
516
                  border-bottom: $crumb-height*2 solid transparent;
517
                  position: absolute;
518
                  top: 50%;
519
                  margin-top: -$crumb-height*2;
520
                  margin-left: 1px;
521
                  left: 100%;
522
                  z-index: 1; 
523
              }
524
              &::after {
525
                  content: " "; 
526
                  display: block;
527
                  width: 0; 
528
                  height: 0;
529
                  border-left: $triangle-width solid $crumb-background-color;
530
                  border-top: $crumb-height*2 solid transparent;
531
                  border-bottom: $crumb-height*2 solid transparent;
532
                  border-right: none;
533
                  position: absolute;
534
                  top: 50%;
535
                  margin-top: -$crumb-height*2;
536
                  left: 100%;
537
                  z-index: 2; 
538
              }
539
          }
540
          &::first-child span.crumb {
541
            padding-left: 10px;
542
          }
543
          span.active {
544
              background-color: $crumb-active-background-color;
545
          }
546
       }
547
       
548
    }
549
    
550 1affb934 Andreas Kohlbecker
    // ---------- ---------- //
551 a6584bc2 Andreas Kohlbecker
552 1affb934 Andreas Kohlbecker
    .v-slot-message-item {
553
        .date-time {
554
            font-weight: lighter;
555
        }
556
        .user-name {
557
            font-weight: bold;
558
        }
559
    }
560 2d703592 Andreas Kohlbecker
}