/
_styles.scss
206 lines (162 loc) · 6.41 KB
/
_styles.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
//
// Application-specific theming template for qx.Mobile Applications
//
// Modify the values for customizing your theme
// and run the qooxdoo generator job 'watch-scss'
// Application
$application-font: "Segoe UI", "Slate Pro", sans-serif, Helvetica;
$application-text-color: black;
// Page
$navigationpage-background-color: #F4F4F4;
$navigationpage-border-color: #DDDDDD;
// NavigationBar
$navigationbar-background-color: lighten(#323335, 10%);
$navigationbar-background-color-2: darken($navigationbar-background-color, 20%);
$navigationbar-text-color: white;
$navigationbar-height: 45px;
// NavigationBar Button
$navigationbarbutton-border-radius: 4px;
$navigationbarbutton-background-color: lighten(#F4F4F4,10%);
$navigationbarbutton-background-color-2: darken(#F4F4F4,20%);
$navigationbarbutton-border-color: #888888;
$navigationbarbutton-text-color: #333333;
$navigationbarbutton-active-background-color: lighten(#3D72C9,20%);
$navigationbarbutton-active-background-color-2: #3D72C9;
$navigationbarbutton-active-text-color: white;
$navigationbarbutton-active-border-color: white;
// Dialog
$dialog-border-color: #3D72C9;
$dialog-background-color: #323335;
$dialog-border-radius: 4px;
$dialog-title-text-color: white;
// Group
$group-background-color: white;
$group-border-color: #DDDDDD;
$group-title-text-color: #3D72C9;
$group-border-radius: 4px;
// List
$list-background-color: white;
$list-title-text-color: #333333;
$list-subtitle-text-color: #3D72C9;
$list-border-color: #DDDDDD;
$list-active-background-color: lighten(#3D72C9, 20%);
$list-active-background-color-2: darken($list-active-background-color, 20%);
$list-active-text-color: white;
$list-border-radius: 4px;
$list-arrow-size: 3px;
$list-arrow-thickness: 2px;
$list-arrow-color: gray;
$list-active-arrow-color: white;
// Form
$form-background-color: white;
$form-title-text-color: #3D72C9;
$form-label-text-color: #333333;
$form-border-color: #DDDDDD;
$form-border-radius: 4px;
// Input
$input-text-color: #333333;
$input-border-radius: 4px;
$input-border-color: #DDDDDD;
$input-invalid-border-color: red;
// Checkbox
$checkbox-tick-color: #3D72C9;
$checkbox-border-radius: 0.1em;
$checkbox-border-color: #888888;
$checkbox-background-color: darken(#F4F4F4, 20%);
$checkbox-background-color-2: lighten($checkbox-background-color, 20%);
// Radiobutton
$radiobutton-dot-color: #3D72C9;
$radiobutton-background-color: darken(#F4F4F4, 20%);
$radiobutton-background-color-2: lighten($radiobutton-background-color, 20%);
$radiobutton-border-color: #888888;
$radiobutton-background-inner-color: #45484d;
// Tabbar
$tabbar-height: 45px;
$tabbar-active-background-color: lighten(#3D72C9, 20%);
$tabbar-active-background-color-2: darken($tabbar-active-background-color, 20%);
$tabbar-active-border-color: lighten($tabbar-active-background-color-2, 20%);
$tabbar-inactive-background-color: lighten(#808080, 5%);
$tabbar-inactive-background-color-2: darken($tabbar-inactive-background-color, 15%);
$tabbar-inactive-border-color: lighten($tabbar-inactive-background-color, 20%);
$tabbar-active-text-color: white;
$tabbar-inactive-text-color: white;
$tabbar-border-radius: 4px;
$tabbar-button-distance: 4px;
// ToggleButton
$togglebutton-text-color: #666666;
$togglebutton-background-color: white;
$togglebutton-active-background-color: #3D72C9;
$togglebutton-active-text-color: white;
$togglebutton-border-radius: 30px;
// Carousel
$carousel-pagination-background-color: white;
$carousel-pagination-active-background-color: #3D72C9;
$carousel-pagination-border-radius: 15px;
// Button
$button-text-color: #333333;
$button-active-text-color: white;
$button-border-radius: 4px;
$button-border-color: #888888;
$button-active-border-color: #888888;
$button-background-color: lighten(#F4F4F4, 10%);
$button-background-color-2: darken($button-background-color, 20%);
$button-active-background-color: lighten(#3D72C9, 20%);
$button-active-background-color-2: darken($button-active-background-color, 20%);
// SelectBox
$selectbox-border-radius: 4px;
$selectbox-border-color: #9e9e9e;
$selectbox-text-color: #333333;
$selectbox-background-color: lighten(#F4F4F4,20%);
$selectbox-background-color-2: darken($selectbox-background-color,40%);
$selectbox-active-background-color: lighten(#3D72C9, 20%);
$selectbox-active-background-color-2: darken($selectbox-active-background-color, 30%);
$selectbox-active-text-color: white;
$selectbox-item-selected-text-color: white;
$selectbox-item-selected-background-color: #3D72C9;
// Slider
$slider-background-color: white;
$slider-active-area-color: #3D72C9;
$slider-border-radius: 20px;
$slider-border-color: #9e9e9e;
$slider-knob-border-radius: 20px;
// Toolbar
$toolbar-text-color: #333333;
$toolbar-background-color: lighten(#F4F4F4, 10%);
$toolbar-background-color-2: darken($toolbar-background-color, 20%);
$toolbar-active-background-color: lighten(#3D72C9, 20%);
$toolbar-active-background-color-2: darken($toolbar-active-background-color, 20%);
$toolbar-active-text-color: white;
$toolbar-border-color: #999;
$toolbar-border-radius: 4px;
// Menu
$menu-item-selected-text-color: white;
$menu-item-selected-background-color: #3D72C9;
// Picker
$picker-spinning-wheel-overlay-color-1: rgba(#F4F4F4, 1);
$picker-spinning-wheel-overlay-color-2: rgba(#F4F4F4, 0);
$picker-spinning-wheel-text-color: #333333;
$picker-spinning-wheel-background-color: #F4F4F4;
$picker-highlight-color: rgba(#3D72C9, 0.5);
$picker-spinning-wheel-border-radius: 4px;
$picker-spinning-wheel-divider-color: #888;
// Drawer
$drawer-border-color: #45484d;
$drawer-above-background-color: #F4F4F4;
$drawer-below-background-color: #808080;
// Collapsible
$collapsible-border-radius: 4px;
$collapsible-header-border-color: #888888;
$collapsible-header-text-color: #333333;
$collapsible-header-active-text-color: white;
$collapsible-header-background-color: lighten(#F4F4F4, 10%);
$collapsible-header-background-color-2: darken($collapsible-header-background-color, 20%);
$collapsible-header-active-background-color: lighten(#3D72C9, 10%);
$collapsible-header-active-background-color-2: darken($collapsible-header-active-background-color, 20%);
$collapsible-header-padding: 10px;
$collapsible-header-content-distance: 10px;
$collapsible-content-border-color: #DDDDDD;
$collapsible-content-padding: 10px;
$collapsible-content-background-color: white;
$collapsible-arrow-size: 8px;
$collapsible-arrow-color: #333333;
$collapsible-active-arrow-color: white;