Project

General

Profile

Download (8.23 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: 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
// Status colors for the redistration
56
// 
57
// change-color cant be used since this is not fully supported by the vaadin sass-compiler
58
// see https://github.com/vaadin/sass-compiler/issues/147
59
$status-reference-color:$v-focus-color;
60
$hue-offset: hue($status-reference-color);
61
$plain-red: adjust-color($status-reference-color, $hue: -1 * $hue-offset);  // red as 0 degree hue
62
$status-rejected-color: adjust-color($plain-red, $hue: 0deg);
63
$status-curation-color: adjust-color($plain-red, $hue: 35deg); 
64
$status-preparation-color: adjust-color($plain-red, $hue: 60deg); 
65
$status-published-color: adjust-color($plain-red, $hue: 105deg); 
66
$status-ready-color: adjust-color($plain-red, $hue: 180deg);
67
// ========================================== //
68

    
69

    
70
@mixin edit-valo {
71
  @include valo;
72

    
73
  // Insert your own theme rules here
74
  
75
  // --- AbstractPageView --- // 
76
  #header {
77
    text-align: center;
78
    margin: round($v-layout-spacing-vertical/2); // corresponds to layout spacing
79
    font-size: $v-font-size--huge; // corresponds to valo style huge (26px)
80
  }
81

    
82
  #subheader {
83
    text-align: center;
84
    margin: round($v-layout-spacing-vertical/2);
85
    font-size: $v-font-size; // valo default font size (16px)
86
  }
87
  // ------------------- // 
88
  
89
  .logo_giant {
90
    font-size: 400%;
91
   }
92
   
93
   .v-button-giant {
94
     font-size: 32px;
95
     .v-icon {
96
       font-size: 64px;
97
       line-height: 50px;
98
     }
99
   }
100

    
101
   .v-label .caption {
102
       font-size: $v-font-size--small;
103
   }
104
   
105
   // label with caption and icon horizonatally aligned
106
   // to apply this to a Vaadin Label set 'label-nowrap'
107
   // as style
108

    
109
    .v-caption-label-nowrap, .v-label-label-nowrap {
110
        display: inline;
111
    }
112
    .v-label-label-nowrap {
113
//         margin-left: 8px; // TODO use sass variable here
114
//         vertical-align: baseline;
115
        .v-icon {
116
           display : inline;
117
        }
118
    }
119
   
120
   
121
   .dashboard-actions {
122
      margin: 0 10%;
123
    
124
      .dashboard-action-2 {
125
        width: 50%;
126
        .v-label {
127
            white-space: normal;
128
        }
129
      }
130
      .dashboard-action-3 {
131
        width: 33%;
132
        .v-label {
133
            white-space: normal;
134
        }
135
      }
136
      &[width-range~="-650px"] {
137
          .dashboard-action-2, .dashboard-action-3 {
138
              width: 100%;
139
          }
140
      }
141
    }
142

    
143
    // ===== workflow ==== // 
144
    
145
    $workflow-icon-size: 110px;
146
    // can not be set per css as this need to set as property to the component in vaadin
147
    $workflow-timeline-bar-height: 10px; 
148
    // the fator by which the caption should be smaller than the circe
149
    $workflow-caption-shrink: 0.64; 
150

    
151
    $workflow-icon-margin-h: $workflow-icon-size / 5;
152
    $workflow-icon-left: $workflow-icon-margin-h / 2;
153
    $workflow-caption-font-size: $workflow-icon-size * $workflow-caption-shrink;
154
        
155
    .workflow {
156
        .steps {
157
            z-index: 10;
158
            
159
            .v-csslayout {
160
                width: $workflow-icon-size + 2 * $workflow-icon-margin-h;
161
                .v-label {
162
                    display: block;
163
                    text-align: center;
164
                }
165
            }
166
         }
167
         .timeline {
168
            display: block;
169
            position: relative;
170
            top: ($workflow-icon-size / 2) + $workflow-timeline-bar-height / 2;
171
            padding: 0 $workflow-icon-size / 2;
172
            .timeline-bar {
173
                z-index: 0;
174
                background-color: $v-font-color;
175
            }
176
        }
177
    }
178

    
179
    .workflow-item {
180
        .v-button {
181
            margin: 0 $workflow-icon-margin-h;
182
            font-size: $workflow-icon-size;
183
            height: $workflow-icon-size;
184
            width: $workflow-icon-size;
185
            line-height: $workflow-icon-size;
186
        
187
            .v-icon, .v-button-caption {
188
                position: absolute;
189
                left: $workflow-icon-left;
190
                top: 0px;
191
            }
192
            .v-button-caption {
193
                font-family: monospace;
194
                left: (($workflow-icon-size - $workflow-caption-font-size) / 2) + $workflow-icon-left; // 30px;
195
                top: -2px;
196
                color: $v-background-color;
197
                font-size: $workflow-caption-font-size; // 70px;
198
            }
199
        }
200
    }
201

    
202
    // --------------------------------------------------- //
203
    
204
    .registration-item {
205
        border-top: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
206
        padding-top: 4px; // avoid button group to overlap with border
207
    }
208
    
209
    #registration-list {
210
        /* --- for the css layout --- */
211
        overflow: auto;
212
        height: 100%;
213
        padding-left: round($v-unit-size/3);
214
        padding-right: round($v-unit-size/3);
215
        
216
        border: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
217
        border-radius: $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0;
218
        /* ----------------------------------------------- */
219
        
220
        // for grid rows
221
        .status-REJECTED {
222
            color: $status-rejected-color;
223
            td.registrationType, td.status {
224
                color: $status-rejected-color;
225
            }
226
        }
227
        .status-CURATION {
228
            color: $status-curation-color;
229
            td.registrationType, td.status {
230
                color: $status-curation-color;
231
            }
232
        }
233
        .status-PREPARATION {
234
            color: $status-preparation-color;
235
            td.registrationType, td.status {
236
                color: $status-preparation-color;
237
            }
238
        }
239
        .status-PUBLISHED {
240
            color: $status-published-color;
241
            td.registrationType, td.status {
242
                color: $status-published-color;
243
            }
244
        }
245
        .status-READY {
246
            color: $status-ready-color;
247
            td.registrationType, td.status {
248
                color: $status-ready-color;
249
            }
250
        }
251
        // for RegistrationItems
252
        .v-caption-status-REJECTED {
253
            color: $status-rejected-color;
254
        }
255
        .v-caption-status-CURATION {
256
            color: $status-curation-color;
257
        }
258
        .v-caption-status-PREPARATION {
259
            color: $status-preparation-color;
260
        }
261
        .v-caption-status-PUBLISHED {
262
            color: $status-published-color;
263
        }
264
        .v-caption-status-READY {
265
            color: $status-ready-color;
266
        }
267
    }
268

    
269

    
270
}
(2-2/3)