Project

General

Profile

Statistics
| Branch: | Tag: | Revision:

cdm-vaadin / src / main / webapp / VAADIN / themes / edit-valo / edit-valo.scss @ a7612c19

History | View | Annotate | Download (17.1 KB)

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
/*
31
*/
32
$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

    
49
// ========================================== //
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
@import "valo-fix.scss";
57

    
58
@import "custom-fields.scss";
59

    
60

    
61
// ========================================== //
62

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

    
66
.IcoMoon {
67
   font-family: IcoMoon;
68
   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
// ========================================== //
77
// Status colors for the registration
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
$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
$status-rejected-color: adjust-color($plain-red, $hue: 0deg);
85
$status-curation-color: adjust-color($plain-red, $hue: 35deg); 
86
$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
@mixin registration-status-colors($sub-selector: '') {
92
    .registration-status-REJECTED #{$sub-selector} {
93
        color: $status-rejected-color;
94
    }
95
    .registration-status-CURATION #{$sub-selector} {
96
        color: $status-curation-color;
97
    }
98
    .registration-status-PREPARATION #{$sub-selector} {
99
        color: $status-preparation-color;
100
    }
101
    .registration-status-PUBLISHED #{$sub-selector} {
102
        color: $status-published-color;
103
    }
104
    .registration-status-READY #{$sub-selector} {
105
        color: $status-ready-color;
106
    }
107
}
108

    
109
@mixin registration-status-bg-colors($sub-selector: '') {
110
    .bg-status-REJECTED #{$sub-selector} {
111
        background-color: $status-rejected-color;
112
    }
113
    .bg-status-CURATION #{$sub-selector} {
114
        background-color: $status-curation-color;
115
    }
116
    .bg-status-PREPARATION #{$sub-selector}  {
117
        background-color: $status-preparation-color;
118
    }
119
    .bg-status-PUBLISHED #{$sub-selector} {
120
        background-color: $status-published-color;
121
    }
122
    .bg-status-READY #{$sub-selector} {
123
        background-color: $status-ready-color;
124
    }
125
}
126

    
127

    
128

    
129
@mixin edit-valo {
130
  @include valo;
131

    
132
  // Insert your own theme rules here
133
  
134
  // --- AbstractPageView --- // 
135
  #header {
136
    text-align: center;
137
    margin: round($v-layout-spacing-vertical/2); // corresponds to layout spacing
138
    font-size: $v-font-size--huge; // corresponds to valo style huge (26px)
139
  }
140

    
141
  #subheader {
142
    text-align: center;
143
    margin: round($v-layout-spacing-vertical/2);
144
    font-size: $v-font-size; // valo default font size (16px)
145
  }
146
  // ------------------- // 
147
  
148
  .logo_giant {
149
    font-size: 400%;
150
   }
151
   
152
   .v-button-giant {
153
     font-size: 32px;
154
     .v-icon {
155
       font-size: 64px;
156
       line-height: 50px;
157
     }
158
   }
159
   
160
   .v-button-center-h {
161
    // requires width to be defined 
162
    display: block;
163
    margin: 0 auto;
164
   }
165

    
166
   .v-label .caption {
167
       font-size: $v-font-size--small;
168
   }
169
   
170
   // label with caption and icon horizonatally aligned
171
   // to apply this to a Vaadin Label set 'label-nowrap'
172
   // as style
173

    
174
    .v-caption-label-nowrap, .v-label-label-nowrap {
175
        display: inline;
176
    }
177
    .v-label-label-nowrap {
178
//         margin-left: 8px; // TODO use sass variable here
179
//         vertical-align: baseline;
180
        .v-icon {
181
           display : inline;
182
        }
183
    } 
184

    
185
   .friendly-foreground {
186
        color: $v-friendly-color;
187
    }
188
   
189
   .v-button .button-badge {
190
         @include valo-badge-style($states: inactive, $background-color: lighten($v-background-color, 10%), $active-color: $v-focus-color);
191
    } 
192
   
193
   .dashboard-actions {
194
      margin: 0 10%;
195
    
196
      .dashboard-action-2 {
197
        width: 50%;
198
        .v-label {
199
            white-space: normal;
200
        }
201
      }
202
      .dashboard-action-3 {
203
        width: 33%;
204
        .v-label {
205
            white-space: normal;
206
        }
207
      }
208
      &[width-range~="-650px"] {
209
          .dashboard-action-2, .dashboard-action-3 {
210
              width: 100%;
211
          }
212
      }
213
    }
214
    
215
    // ==== styles in eu.etaxonomy.cdm.vaadin.theme.EditValoTheme ==== // 
216
    
217
    // style for buttons highlighted as being active
218
    .v-button-highlite {
219
        color: $v-focus-color;
220
    }
221
    
222
    .v-panel-padding-left .v-panel-content {
223
        padding-left: round($v-unit-size / 4);
224
    }
225
    
226
     .v-select-optiongroup-optiongroup-caption-fix {
227
        margin-left: round($v-unit-size / 4);
228
     }
229

    
230
    // ===== workflow ==== // 
231
    
232
    #workflow {
233
        .registration-list {
234
                .v-gridlayout-slot {
235
                    border-bottom: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
236
                }
237
            }
238
         .v-gridlayout-registration-list-item {
239
            padding: 0 round($v-unit-size / 4);
240
         }
241
    }
242
    
243
    $workflow-icon-size: 110px;
244
    // can not be set per css as this need to set as property to the component in vaadin
245
    $workflow-timeline-bar-height: 10px; 
246
    // the fator by which the caption should be smaller than the circe
247
    $workflow-caption-shrink: 0.64; 
248

    
249
    $workflow-icon-margin-h: $workflow-icon-size / 5;
250
    $workflow-icon-left: $workflow-icon-margin-h / 2;
251
    $workflow-caption-font-size: $workflow-icon-size * $workflow-caption-shrink;        
252
    
253
    .workflow {
254
        .steps {
255
            z-index: 10;
256
            
257
            .v-csslayout {
258
                width: $workflow-icon-size + 2 * $workflow-icon-margin-h;
259
                .v-label {
260
                    display: block;
261
                    text-align: center;
262
                }
263
            }
264
         }
265
         .timeline {
266
            display: block;
267
            position: relative;
268
            top: ($workflow-icon-size / 2) + $workflow-timeline-bar-height / 2;
269
            padding: 0 $workflow-icon-size / 2;
270
            .timeline-bar {
271
                z-index: 0;
272
                background-color: $v-font-color;
273
            }
274
        }
275
    }
276

    
277
    .workflow-item {
278
        .v-button {
279
            margin: 0 $workflow-icon-margin-h;
280
            font-size: $workflow-icon-size;
281
            height: $workflow-icon-size;
282
            width: $workflow-icon-size;
283
            line-height: $workflow-icon-size;
284
        
285
            .v-icon, .v-button-caption {
286
                position: absolute;
287
                left: $workflow-icon-left;
288
                top: 0px;
289
            }
290
            .v-button-caption {
291
                font-family: monospace;
292
                left: (($workflow-icon-size - $workflow-caption-font-size) / 2) + $workflow-icon-left; // 30px;
293
                top: -2px;
294
                color: $v-background-color;
295
                font-size: $workflow-caption-font-size; // 70px;
296
            }
297
        }
298
    }
299
    
300
   
301
   // --------------------------------------------------- //
302

    
303
    #workingset {
304
            padding: round($v-unit-size / 2);
305
            .registration-list, .registration-list-item {
306
                margin-top: round($v-unit-size / 2);
307
            }
308
        
309
            .v-panel-content {
310
                padding: 0 round($v-unit-size/3);
311
            }
312
            .registration-list .item-footer {
313
                border-bottom: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
314
            }
315
    }
316

    
317
    // --------------------------------------------------- //
318
    .v-caption-submitter {
319
            margin-right: round($v-unit-size / 8);
320
    }
321
        
322
    .registration-list-item {
323
        border-bottom: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
324
        padding-top: 4px; // avoid button group to overlap with border
325
        .v-label-registration-state {
326
            margin-right: round($v-unit-size / 4);
327
        }            
328
        
329
    }
330

    
331
   .registration-workflow-item {
332
       border: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
333
    }
334

    
335
    // tab element being part of a process ----------- //
336
    // use $v-unit-size instead of $v-font-size * 3?
337
    .workflow-step-wrap {
338
        padding-right: 10px;
339
        height: $v-font-size * 3;
340
        background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
341
        @include box-shadow(inset 0 0 5px $v-app-background-color);
342
    }
343
    .workflow-step {
344
        line-height: $v-font-size * 3;
345
    }
346
    .v-caption-workflow-step {
347
        vertical-align: top;
348
        padding: 0;
349
         .v-icon {
350
            line-height: $v-font-size * 3;
351
            font-size: $v-font-size * 3.5;
352
            padding-right: 10px;
353
            color: $v-background-color;
354
        }
355
    }
356

    
357
    .workflow-tabsheet {
358
        
359
        table.v-tabsheet-tabs, .v-tabsheet-tabs tr, .v-tabsheet-tabs tbody {
360
          width: 100%; 
361
        }
362
        
363
        .v-tabsheet-tabitemcell {
364
              width: 25%;
365
        }
366

    
367
        .v-tabsheet-tabitem {
368
            
369
            // background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
370
            // @include valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to right);
371
            // @include box-shadow(inset 0 0 5px $v-app-background-color);
372
            // background-color: $v-font-color
373
            
374
            // border: valo-border($border: 2px solid, $color: $v-font-color, $strength: 1);
375
            
376
            background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
377
            @include box-shadow(inset 0 0 5px $v-app-background-color);
378
            border: valo-border($border: 2px solid, $color: $v-app-background-color, $strength: 1);
379
            border-color: $v-app-background-color;
380
            .v-caption {
381
                // line-height: $v-unit-size;
382
                margin: 0;
383
                padding: 0;
384
                padding-right: $v-unit-size / 2;
385
                border: 0px none;
386
            }
387
            .v-icon {
388
                line-height: $v-unit-size;
389
                font-size: $v-unit-size * 1.8;
390
                vertical-align: middle;
391
                // padding-right: $v-unit-size / 2;
392
                
393
                //color: $v-font-color;
394
                
395
                color: $v-app-background-color;
396
            }
397
        }
398
    }
399

    
400
    // =============================================== //
401
    .registration-status {
402
        display: block;
403
    }
404
    
405
   @include registration-status-colors();
406
   @include registration-status-bg-colors(); // TODO still needed?
407
   @include registration-status-colors(.v-select-select);
408
   
409
    // ----------------------------------------------- //
410
    
411
    #registration-list {
412
        /* --- for the css layout --- */
413
        overflow: auto;
414
        height: 100%;
415
        padding-left: round($v-unit-size/3);
416
        padding-right: round($v-unit-size/3);
417
        
418
        border: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
419
        border-radius: $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0;
420
        /* ----------------------------------------------- */
421
        // TODO can the mixin registration-status-colors() be used here?
422
        // for grid rows
423
        .status-REJECTED {
424
            color: $status-rejected-color;
425
            td.registrationType, td.status {
426
                color: $status-rejected-color;
427
            }
428
        }
429
        .status-CURATION {
430
            color: $status-curation-color;
431
            td.registrationType, td.status {
432
                color: $status-curation-color;
433
            }
434
        }
435
        .status-PREPARATION {
436
            color: $status-preparation-color;
437
            td.registrationType, td.status {
438
                color: $status-preparation-color;
439
            }
440
        }
441
        .status-PUBLISHED {
442
            color: $status-published-color;
443
            td.registrationType, td.status {
444
                color: $status-published-color;
445
            }
446
        }
447
        .status-READY {
448
            color: $status-ready-color;
449
            td.registrationType, td.status {
450
                color: $status-ready-color;
451
            }
452
        }
453

    
454
    }
455
    
456
    // ---------------- custom components ----------------------- //
457
    
458
    .edit-button-group {
459
        margin-top: round($v-unit-size/10);
460
        .v-button {
461
            padding: 0 round($v-unit-size/4);
462
            height: round(2 * $v-unit-size/3 )
463
            // margin: 0 round($v-unit-size/4);
464
        }
465
        .v-label {
466
            display: inline;
467
            white-space: normal;
468
        }
469
    }
470
    
471
    // ---------- popup editor windows ---------------------------------//
472
    .v-window-top-toolbar {
473
        margin-bottom: round($v-unit-size/4);
474
        .v-component-group {
475
            float: right;
476
        }
477
    }
478
    
479
    #context-breadcrumbs .breadcrumbs {
480
      // for an explanation of how the CSS Triangles to work 
481
      // see https://css-tricks.com/triangle-breadcrumbs/
482
    
483
      $crumb-background-color: $v-app-background-color;
484
      $crumb-active-background-color: #3a6972; //TODO calculate using active-color and $v-background-color or $v-app-background-color
485
      $crumb-border-color: $v-textfield-background-color--readonly;
486
      $crumb-height: 10px; 
487
      $triangle-width: 10px; 
488
      
489
      $crumb-border: valo-border($color: $crumb-border-color);
490
      
491
      list-style: none; 
492
      overflow: hidden;
493
      margin: 0; 
494
      padding: 0;
495
      line-height: $crumb-height;
496
      border-radius: $v-border-radius;
497
      border: $crumb-border;
498
      li {
499
          float: left;
500
          span.crumb {
501
            padding: 10px 10px 10px 20px;
502
            background-color: $crumb-background-color;
503
            position: relative;
504
            display: block;
505
            float: left;
506
            &::before {
507
                  content: " "; 
508
                  display: block;
509
                  width: 0; 
510
                  height: 0;
511
                  border-left: $crumb-border;
512
                  border-left-width: $triangle-width;
513
                  border-top: $crumb-height*2 solid transparent;
514
                  border-bottom: $crumb-height*2 solid transparent;
515
                  position: absolute;
516
                  top: 50%;
517
                  margin-top: -$crumb-height*2;
518
                  margin-left: 1px;
519
                  left: 100%;
520
                  z-index: 1; 
521
              }
522
              &::after {
523
                  content: " "; 
524
                  display: block;
525
                  width: 0; 
526
                  height: 0;
527
                  border-left: $triangle-width solid $crumb-background-color;
528
                  border-top: $crumb-height*2 solid transparent;
529
                  border-bottom: $crumb-height*2 solid transparent;
530
                  border-right: none;
531
                  position: absolute;
532
                  top: 50%;
533
                  margin-top: -$crumb-height*2;
534
                  left: 100%;
535
                  z-index: 2; 
536
              }
537
          }
538
          &::first-child span.crumb {
539
            padding-left: 10px;
540
          }
541
          span.active {
542
              background-color: $crumb-active-background-color;
543
          }
544
       }
545
       
546
    }
547
    
548
    // ---------- ---------- //
549

    
550
    .v-slot-message-item {
551
        .date-time {
552
            font-weight: lighter;
553
        }
554
        .user-name {
555
            font-weight: bold;
556
        }
557
    }
558
}
Add picture from clipboard (Maximum size: 40 MB)