Project

General

Profile

Download (5.96 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
$hue-offset: hue($v-focus-color);
60
$plain-red: adjust-color($v-focus-color, $hue: -1 * $hue-offset);  // red as 0 degree hue
61
$status-rejected-color: adjust-color($plain-red, $hue: 0deg);
62
$status-curation-color: adjust-color($plain-red, $hue: 30deg); 
63
$status-preparation-color: adjust-color($plain-red, $hue: 60deg); 
64
$status-published-color: adjust-color($plain-red, $hue: 105deg); 
65
$status-ready-color: adjust-color($plain-red, $hue: 180deg);
66
// ========================================== //
67

    
68

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

    
72
  // Insert your own theme rules here
73
  
74
  .logo_giant {
75
    font-size: 400%;
76
   }
77
   
78
   .v-button-giant {
79
     font-size: 32px;
80
     .v-icon {
81
       font-size: 64px;
82
       line-height: 50px;
83
     }
84
   }
85
   
86
   .dashboard-actions {
87
      margin: 0 10%;
88
    
89
      .dashboard-action-2 {
90
        width: 50%;
91
        .v-label {
92
            white-space: normal;
93
        }
94
      }
95
      .dashboard-action-3 {
96
        width: 33%;
97
        .v-label {
98
            white-space: normal;
99
        }
100
      }
101
      &[width-range~="-650px"] {
102
          .dashboard-action-2, .dashboard-action-3 {
103
              width: 100%;
104
          }
105
      }
106
    }
107
    
108
    .workflow {
109
    
110
        $workflow-icon-size: 110px;
111
        // can not be set per css as this need to set as property to the component in vaadin
112
        $workflow-timeline-bar-height: 10px; 
113
        // the fator by which the caption should be smaller than the circe
114
        $workflow-caption-shrink: 0.64; 
115

    
116
        $workflow-icon-margin-h: $workflow-icon-size / 5;
117
        $workflow-icon-left: $workflow-icon-margin-h / 2;
118
        $workflow-caption-font-size: $workflow-icon-size * $workflow-caption-shrink;
119
        
120
        .steps {
121
            z-index: 10;
122
            
123
            .v-button {
124
                margin: 0 $workflow-icon-margin-h;
125
                font-size: $workflow-icon-size;
126
                height: $workflow-icon-size;
127
                width: $workflow-icon-size;
128
                line-height: $workflow-icon-size;
129
            
130
                .v-icon, .v-button-caption {
131
                    position: absolute;
132
                    left: $workflow-icon-left;
133
                    top: 0px;
134
                }
135
                .v-button-caption {
136
                    font-family: monospace;
137
                    left: (($workflow-icon-size - $workflow-caption-font-size) / 2) + $workflow-icon-left; // 30px;
138
                    top: -2px;
139
                    color: $v-background-color;
140
                    font-size: $workflow-caption-font-size; // 70px;
141
                }
142
            }
143
            
144
            .v-csslayout {
145
                width: $workflow-icon-size + 2 * $workflow-icon-margin-h;
146
                .v-label {
147
                    display: block;
148
                    text-align: center;
149
                }
150
            }
151
         }
152
         
153
         .timeline {
154
            display: block;
155
            position: relative;
156
            top: ($workflow-icon-size / 2) + $workflow-timeline-bar-height / 2;
157
            padding: 0 $workflow-icon-size / 2;
158
            .timeline-bar {
159
                z-index: 0;
160
                background-color: $v-font-color;
161
            }
162
        }
163
    }
164
    
165
    
166
    
167
    #registration-list {
168
        .status-rejected {
169
            td.registrationType, td.status {
170
                color: $status-rejected-color;
171
            }
172
        }
173
        .status-curation {
174
            td.registrationType, td.status {
175
                color: $status-curation-color;
176
            }
177
        }
178
        .status-preparation {
179
            td.registrationType, td.status {
180
                color: $status-preparation-color;
181
            }
182
        }
183
        .status-published {
184
            td.registrationType, td.status {
185
                color: $status-published-color;
186
            }
187
        }
188
        .status-ready {
189
            td.registrationType, td.status {
190
                color: $status-ready-color;
191
            }
192
        }
193
    }
194

    
195
}
(2-2/3)