Project

General

Profile

Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (12 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: 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
// ========================================== //
56

    
57
// import custom font icons TODO rename font
58
@include v-font(IcoMoon, "../../../../../fonts/icomoon");
59

    
60
.IcoMoon {
61
   font-family: IcoMoon;
62
   font-style: normal;
63
   font-weight: normal;
64
   -webkit-font-smoothing: antialiased;
65
   -moz-osx-font-smoothing: grayscale;
66
   display: inline-block;
67
   text-align: center;
68
}
69

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

    
85

    
86
@mixin edit-valo {
87
  @include valo;
88

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

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

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

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

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

    
166
    // ===== workflow ==== // 
167

    
168
    #workflow-container {
169
        text-align: center;
170
        margin-top: $v-unit-size;
171
    }
172
    
173
    $workflow-icon-size: 110px;
174
    // can not be set per css as this need to set as property to the component in vaadin
175
    $workflow-timeline-bar-height: 10px; 
176
    // the fator by which the caption should be smaller than the circe
177
    $workflow-caption-shrink: 0.64; 
178

    
179
    $workflow-icon-margin-h: $workflow-icon-size / 5;
180
    $workflow-icon-left: $workflow-icon-margin-h / 2;
181
    $workflow-caption-font-size: $workflow-icon-size * $workflow-caption-shrink;        
182
    
183
    .workflow {
184
        .steps {
185
            z-index: 10;
186
            
187
            .v-csslayout {
188
                width: $workflow-icon-size + 2 * $workflow-icon-margin-h;
189
                .v-label {
190
                    display: block;
191
                    text-align: center;
192
                }
193
            }
194
         }
195
         .timeline {
196
            display: block;
197
            position: relative;
198
            top: ($workflow-icon-size / 2) + $workflow-timeline-bar-height / 2;
199
            padding: 0 $workflow-icon-size / 2;
200
            .timeline-bar {
201
                z-index: 0;
202
                background-color: $v-font-color;
203
            }
204
        }
205
    }
206

    
207
    .workflow-item {
208
        .v-button {
209
            margin: 0 $workflow-icon-margin-h;
210
            font-size: $workflow-icon-size;
211
            height: $workflow-icon-size;
212
            width: $workflow-icon-size;
213
            line-height: $workflow-icon-size;
214
        
215
            .v-icon, .v-button-caption {
216
                position: absolute;
217
                left: $workflow-icon-left;
218
                top: 0px;
219
            }
220
            .v-button-caption {
221
                font-family: monospace;
222
                left: (($workflow-icon-size - $workflow-caption-font-size) / 2) + $workflow-icon-left; // 30px;
223
                top: -2px;
224
                color: $v-background-color;
225
                font-size: $workflow-caption-font-size; // 70px;
226
            }
227
        }
228
    }
229

    
230
    #workingset {
231
            padding: round($v-unit-size / 2);
232
            .names-types-list, .registration-list-item {
233
                margin-top: round($v-unit-size / 2);
234
            }
235
    }
236

    
237
    // --------------------------------------------------- //
238
    
239
    .registration-list-item {
240
        border-top: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
241
        padding-top: 4px; // avoid button group to overlap with border
242
    }
243

    
244
   .registration-workflow-item {
245
       border: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
246
    }
247

    
248
    // tab element being part of a process ----------- //
249
    // use $v-unit-size instead of $v-font-size * 3?
250
    .workflow-step-wrap {
251
        padding-right: 10px;
252
        height: $v-font-size * 3;
253
        background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
254
        @include box-shadow(inset 0 0 5px $v-app-background-color);
255
    }
256
    .workflow-step {
257
        line-height: $v-font-size * 3;
258
    }
259
    .v-caption-workflow-step {
260
        vertical-align: top;
261
        padding: 0;
262
         .v-icon {
263
            line-height: $v-font-size * 3;
264
            font-size: $v-font-size * 3.5;
265
            padding-right: 10px;
266
            color: $v-background-color;
267
        }
268
    }
269

    
270
    .workflow-tabsheet {
271
        
272
        table.v-tabsheet-tabs, .v-tabsheet-tabs tr, .v-tabsheet-tabs tbody {
273
          width: 100%; 
274
        }
275
        
276
        .v-tabsheet-tabitemcell {
277
              width: 25%;
278
        }
279

    
280
        .v-tabsheet-tabitem {
281
            
282
            // background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
283
            // @include valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to right);
284
            // @include box-shadow(inset 0 0 5px $v-app-background-color);
285
            // background-color: $v-font-color
286
            
287
            // border: valo-border($border: 2px solid, $color: $v-font-color, $strength: 1);
288
            
289
            background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);
290
            @include box-shadow(inset 0 0 5px $v-app-background-color);
291
            border: valo-border($border: 2px solid, $color: $v-app-background-color, $strength: 1);
292
            border-color: $v-app-background-color;
293
            .v-caption {
294
                // line-height: $v-unit-size;
295
                margin: 0;
296
                padding: 0;
297
                padding-right: $v-unit-size / 2;
298
                border: 0px none;
299
            }
300
            .v-icon {
301
                line-height: $v-unit-size;
302
                font-size: $v-unit-size * 1.8;
303
                vertical-align: middle;
304
                // padding-right: $v-unit-size / 2;
305
                
306
                //color: $v-font-color;
307
                
308
                color: $v-app-background-color;
309
            }
310
        }
311
    }
312

    
313
    // ----------------------------------------------- //
314
    
315
   // status colors --------------------------------- //
316
    .status-REJECTED {
317
        color: $status-rejected-color;
318
    }
319
    .status-CURATION {
320
        color: $status-curation-color;
321
    }
322
    .status-PREPARATION {
323
        color: $status-preparation-color;
324
    }
325
    .status-PUBLISHED {
326
        color: $status-published-color;
327
    }
328
    .status-READY {
329
        color: $status-ready-color;
330
    }
331

    
332
    .bg-status-REJECTED {
333
        background-color: $status-rejected-color;
334
    }
335
    .bg-status-CURATION {
336
        background-color: $status-curation-color;
337
    }
338
    .bg-status-PREPARATION {
339
        background-color: $status-preparation-color;
340
    }
341
    .bg-status-PUBLISHED {
342
        background-color: $status-published-color;
343
    }
344
    .bg-status-READY {
345
        background-color: $status-ready-color;
346
    }
347
    // ----------------------------------------------- //
348
    
349
    #registration-list {
350
        /* --- for the css layout --- */
351
        overflow: auto;
352
        height: 100%;
353
        padding-left: round($v-unit-size/3);
354
        padding-right: round($v-unit-size/3);
355
        
356
        border: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
357
        border-radius: $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0;
358
        /* ----------------------------------------------- */
359
        
360
        // for grid rows
361
        .status-REJECTED {
362
            color: $status-rejected-color;
363
            td.registrationType, td.status {
364
                color: $status-rejected-color;
365
            }
366
        }
367
        .status-CURATION {
368
            color: $status-curation-color;
369
            td.registrationType, td.status {
370
                color: $status-curation-color;
371
            }
372
        }
373
        .status-PREPARATION {
374
            color: $status-preparation-color;
375
            td.registrationType, td.status {
376
                color: $status-preparation-color;
377
            }
378
        }
379
        .status-PUBLISHED {
380
            color: $status-published-color;
381
            td.registrationType, td.status {
382
                color: $status-published-color;
383
            }
384
        }
385
        .status-READY {
386
            color: $status-ready-color;
387
            td.registrationType, td.status {
388
                color: $status-ready-color;
389
            }
390
        }
391
    }
392

    
393

    
394
}
Add picture from clipboard (Maximum size: 40 MB)