@travix/ui-themes 1.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.editorconfig +15 -0
- package/LICENCE +7 -0
- package/README.md +20 -0
- package/index.js +19 -0
- package/package.json +25 -0
- package/test.js +8 -0
- package/themes/_default.yaml +218 -0
- package/themes/budgetair/_default.yaml +147 -0
- package/themes/cheaptickets/_default.yaml +196 -0
- package/themes/flugladen/_default.yaml +149 -0
- package/themes/vayama/IE/_default.yaml +47 -0
- package/themes/vayama/_default.yaml +145 -0
- package/themes/vliegwinkel/_default.yaml +133 -0
package/.editorconfig
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
; This file is for unifying the coding style for different editors and IDEs.
|
|
2
|
+
; More information at http://editorconfig.org
|
|
3
|
+
|
|
4
|
+
root = true
|
|
5
|
+
|
|
6
|
+
[*]
|
|
7
|
+
charset = utf-8
|
|
8
|
+
indent_style = space
|
|
9
|
+
indent_size = 2
|
|
10
|
+
end_of_line = lf
|
|
11
|
+
insert_final_newline = true
|
|
12
|
+
trim_trailing_whitespace = true
|
|
13
|
+
|
|
14
|
+
[Makefile]
|
|
15
|
+
indent_style = tab
|
package/LICENCE
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
# Travix themes
|
|
2
|
+
|
|
3
|
+
This is repository for Travix brand themes
|
|
4
|
+
|
|
5
|
+
# Motivation
|
|
6
|
+
As we are moving components to separate travix ui kit we need to provide configuration file for different Travix brands. The main idea of this configuration files is to follow inharitance model where the common rules are written in the _default.yaml files, and this rules can be overwritten by rules specific by `brand`, `affiliate` or `language`.
|
|
7
|
+
|
|
8
|
+
# How it is structured:
|
|
9
|
+
In `themes/_default.yaml` file you can find the most common rules defining a Travix theme. To have specific theme for example CT, we have the path `themes/cheaptickets/_default.yaml`. If you want to be even more specific, for example on an affiliate level, then the file created to overwrite this rules, let's say for NL, needs to have the following path `themes/cheaptickets/NL/_default.yaml`.
|
|
10
|
+
|
|
11
|
+
# How to use it in a project:
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
const fs = require('fs');
|
|
15
|
+
const travixTheme = require('travix-themes');
|
|
16
|
+
const file = travixTheme('cheaptickets', 'en', 'US');
|
|
17
|
+
fs.writeFileSync('./theme.yaml', file);
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
**Work in progress**
|
package/index.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
const fs = require('fs');
|
|
2
|
+
const path = require('path');
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Get theme files in YAML format
|
|
6
|
+
* @param {Object} options
|
|
7
|
+
* @param {string} options.brand - cheaptickets
|
|
8
|
+
* @param {string} options.affiliate - NL
|
|
9
|
+
* @return {String}
|
|
10
|
+
*/
|
|
11
|
+
function getThemeFiles({ brand, affiliate }) {
|
|
12
|
+
return [
|
|
13
|
+
path.join(__dirname, '/themes/_default.yaml'),
|
|
14
|
+
path.join(__dirname, `/themes/${brand}/_default.yaml`),
|
|
15
|
+
path.join(__dirname, `/themes/${brand}/${affiliate.toUpperCase()}/_default.yaml`)
|
|
16
|
+
].filter(fs.existsSync);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
module.exports = getThemeFiles;
|
package/package.json
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@travix/ui-themes",
|
|
3
|
+
"version": "1.1.4",
|
|
4
|
+
"description": "Collection of UI Themes for Travix websites",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
+
},
|
|
9
|
+
"author": {
|
|
10
|
+
"name": "Travix International",
|
|
11
|
+
"url": "http://travix.com"
|
|
12
|
+
},
|
|
13
|
+
"license": "CC-BY-SA",
|
|
14
|
+
"homepage": "https://github.com/Travix-International/ui",
|
|
15
|
+
"contributors": [
|
|
16
|
+
{
|
|
17
|
+
"name": "Artem Riasnianskyi",
|
|
18
|
+
"url": "https://github.com/asci"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"name": "Ivana Viranovska",
|
|
22
|
+
"url": "https://github.com/iwwwi"
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
}
|
package/test.js
ADDED
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
generic:
|
|
2
|
+
font:
|
|
3
|
+
primary:
|
|
4
|
+
weight:
|
|
5
|
+
regular: "400"
|
|
6
|
+
medium: "500"
|
|
7
|
+
semibold: "600"
|
|
8
|
+
bold: "700"
|
|
9
|
+
font-family: "Lato"
|
|
10
|
+
generic-family: "sans-serif"
|
|
11
|
+
secondary:
|
|
12
|
+
weight:
|
|
13
|
+
light: "300"
|
|
14
|
+
regular: "400"
|
|
15
|
+
medium: "500"
|
|
16
|
+
bold: "700"
|
|
17
|
+
font-family: "Roboto"
|
|
18
|
+
generic-family: "sans-serif"
|
|
19
|
+
alternative:
|
|
20
|
+
weight:
|
|
21
|
+
regular: "400"
|
|
22
|
+
font-family: "Handlee"
|
|
23
|
+
generic-family: "cursive"
|
|
24
|
+
color:
|
|
25
|
+
accent-border: &accent-border "#E6BB00"
|
|
26
|
+
accent-border-hover: &accent-border-hover "#F7CB00"
|
|
27
|
+
accent-bottom: &accent-bottom "#F7DE00"
|
|
28
|
+
accent-dark: &accent-dark "#FFF23E"
|
|
29
|
+
accent-darker: &accent-darker "#DAAB00"
|
|
30
|
+
accent-light: &accent-light "#FAF18F"
|
|
31
|
+
accent-lighter: &accent-lighter "#FAF18F"
|
|
32
|
+
accent-top: &accent-top "#F6E500"
|
|
33
|
+
accent: &accent "#F6E41F"
|
|
34
|
+
|
|
35
|
+
primary-darker: &primary-darker "#003F7F"
|
|
36
|
+
primary-darker-rgb: &primary-darker-rgb ${rgb(color["primary-darker"])}
|
|
37
|
+
primary-dark: &primary-dark "#004B94"
|
|
38
|
+
primary: &primary "#0056A9"
|
|
39
|
+
primary-light: &primary-light "#005FBB"
|
|
40
|
+
primary-lighter: &primary-lighter "#006CD2"
|
|
41
|
+
primary-overlay: &primary-overlay "#4A7BA9"
|
|
42
|
+
|
|
43
|
+
secondary-darkest: &secondary-darkest "#7EA6D4"
|
|
44
|
+
secondary-darker: &secondary-darker "#ADC9EA"
|
|
45
|
+
secondary-dark: &secondary-dark "#BDD8F1"
|
|
46
|
+
secondary-dark-rgb: &secondary-dark-rgb ${rgb(color["secondary-dark"])}
|
|
47
|
+
secondary: &secondary "#D5E8F8"
|
|
48
|
+
secondary-rgb: &secondary-rgb ${rgb(secondary)}
|
|
49
|
+
secondary-light: &secondary-light "#EBF5FD"
|
|
50
|
+
secondary-lighter: &secondary-lighter "#F7FBFE"
|
|
51
|
+
|
|
52
|
+
active: &active "#00B0FF"
|
|
53
|
+
positive: &positive "#00B250"
|
|
54
|
+
positive-lighter: &positive-lighter "#e5f7ed"
|
|
55
|
+
positive-rgb: &positive-rgb "23,212,120"
|
|
56
|
+
negative: &negative "#D2373F"
|
|
57
|
+
negative-light: &negative-light "#F4CDCF"
|
|
58
|
+
|
|
59
|
+
shadow: &shadow "#000000"
|
|
60
|
+
shadow-rgb: &shadow-rgb ${rgb(shadow)}
|
|
61
|
+
shadow-alt: "#00196F"
|
|
62
|
+
blank: &blank "#FFFFFF"
|
|
63
|
+
blank-rgb: &blank-rgb ${rgb(blank)}
|
|
64
|
+
|
|
65
|
+
text-darker: &text-darker "#2B4352"
|
|
66
|
+
text-dark: &text-dark "#29425B"
|
|
67
|
+
text: &text "#597385"
|
|
68
|
+
text-light: &text-light "#9DB1C0"
|
|
69
|
+
text-lighter: &text-lighter "#998"
|
|
70
|
+
text-lighter-rgb: &text-lighter-rgb ${rgb(color["text-lighter"])}
|
|
71
|
+
|
|
72
|
+
premium: &premium "#00B34A"
|
|
73
|
+
|
|
74
|
+
facebook: &facebook "#45619D"
|
|
75
|
+
facebook-border: &facebook-border "#324A87"
|
|
76
|
+
twitter: &twitter "#08ACEE"
|
|
77
|
+
twitter-border: &twitter-border "#1871C0"
|
|
78
|
+
google: &google "#B30303"
|
|
79
|
+
google-border: &google-border "#670E00"
|
|
80
|
+
mail: &mail "#006CD2"
|
|
81
|
+
mail-border: &mail-border "#0A50A3"
|
|
82
|
+
separator:
|
|
83
|
+
width: &separator-width 2px
|
|
84
|
+
style: &separator-style dotted
|
|
85
|
+
color: &separator-color "var(--tx-generic-color-secondary)"
|
|
86
|
+
size:
|
|
87
|
+
border-radius: &border-radius "8px"
|
|
88
|
+
border-radius-small: &border-radius-small "6px"
|
|
89
|
+
image:
|
|
90
|
+
baggage-info:
|
|
91
|
+
suitcase: url(//s1.travix.com/cheaptickets/global/assets/images/icons/CT_suitcase.png)
|
|
92
|
+
suitcase--2x: url(//s1.travix.com/cheaptickets/global/assets/images/icons/CT_suitcase_@2x.png)
|
|
93
|
+
animation:
|
|
94
|
+
ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95)
|
|
95
|
+
ui-button:
|
|
96
|
+
default:
|
|
97
|
+
normal:
|
|
98
|
+
border-radius: 6px
|
|
99
|
+
ghost:
|
|
100
|
+
normal:
|
|
101
|
+
background: "transparent"
|
|
102
|
+
border-radius: 5px
|
|
103
|
+
inverted:
|
|
104
|
+
color: *blank
|
|
105
|
+
button:
|
|
106
|
+
color:
|
|
107
|
+
border: "var(--tx-generic-color-accent-border)"
|
|
108
|
+
spinner:
|
|
109
|
+
color:
|
|
110
|
+
light: "#F3FAFF"
|
|
111
|
+
lighter: "#AADDF9"
|
|
112
|
+
list:
|
|
113
|
+
color: "var(--tx-generic-color-text-dark)"
|
|
114
|
+
bullets:
|
|
115
|
+
color: "var(--tx-generic-color-active)"
|
|
116
|
+
line-height: "38px"
|
|
117
|
+
header-offer:
|
|
118
|
+
airline-logo-container:
|
|
119
|
+
margin-top: "24px"
|
|
120
|
+
big-caption:
|
|
121
|
+
font-weight: "var(--tx-generic-font-primary-weight-bold)"
|
|
122
|
+
text-shadow: "var(--tx-header-offer-text-shadow)"
|
|
123
|
+
container:
|
|
124
|
+
height: "290px"
|
|
125
|
+
disclaimer:
|
|
126
|
+
small:
|
|
127
|
+
position: "initial"
|
|
128
|
+
group-2:
|
|
129
|
+
margin-bottom: "0"
|
|
130
|
+
min-height: "42px"
|
|
131
|
+
info-icon-wrapper:
|
|
132
|
+
small:
|
|
133
|
+
margin-right: "10px"
|
|
134
|
+
top: "3px"
|
|
135
|
+
price:
|
|
136
|
+
display: "inline"
|
|
137
|
+
font-size: "34px"
|
|
138
|
+
font-weight: "var(--tx-generic-font-primary-weight-bold)"
|
|
139
|
+
from:
|
|
140
|
+
font-size: "22px"
|
|
141
|
+
small:
|
|
142
|
+
asterisk:
|
|
143
|
+
position: "absolute"
|
|
144
|
+
top: "-5px"
|
|
145
|
+
color: "var(--tx-generic-color-accent-top)"
|
|
146
|
+
currency:
|
|
147
|
+
font-size: "30px"
|
|
148
|
+
font-size: "var(--tx-header-offer-price-font-size)"
|
|
149
|
+
from:
|
|
150
|
+
font-size: "20px"
|
|
151
|
+
padding-bottom: "0"
|
|
152
|
+
text-shadow: "inherit"
|
|
153
|
+
text-shadow: "0px 2px 3px rgba(var(--tx-generic-color-shadow-rgb),0.5)"
|
|
154
|
+
price:
|
|
155
|
+
asterisk:
|
|
156
|
+
xsmall:
|
|
157
|
+
line-height: normal
|
|
158
|
+
small:
|
|
159
|
+
line-height: normal
|
|
160
|
+
medium:
|
|
161
|
+
line-height: normal
|
|
162
|
+
large:
|
|
163
|
+
line-height: normal
|
|
164
|
+
xlarge:
|
|
165
|
+
line-height: normal
|
|
166
|
+
currency:
|
|
167
|
+
xsmall:
|
|
168
|
+
line-height: normal
|
|
169
|
+
small:
|
|
170
|
+
line-height: normal
|
|
171
|
+
medium:
|
|
172
|
+
line-height: normal
|
|
173
|
+
large:
|
|
174
|
+
line-height: normal
|
|
175
|
+
xlarge:
|
|
176
|
+
line-height: normal
|
|
177
|
+
decimals:
|
|
178
|
+
xsmall:
|
|
179
|
+
line-height: normal
|
|
180
|
+
small:
|
|
181
|
+
line-height: normal
|
|
182
|
+
medium:
|
|
183
|
+
line-height: normal
|
|
184
|
+
large:
|
|
185
|
+
line-height: normal
|
|
186
|
+
xlarge:
|
|
187
|
+
line-height: normal
|
|
188
|
+
xsmall:
|
|
189
|
+
underline:
|
|
190
|
+
height: "0"
|
|
191
|
+
margin-top: "0"
|
|
192
|
+
small:
|
|
193
|
+
underline:
|
|
194
|
+
height: "0"
|
|
195
|
+
margin-top: "0"
|
|
196
|
+
medium:
|
|
197
|
+
underline:
|
|
198
|
+
height: "0"
|
|
199
|
+
margin-top: "0"
|
|
200
|
+
large:
|
|
201
|
+
underline:
|
|
202
|
+
height: "0"
|
|
203
|
+
margin-top: "0"
|
|
204
|
+
xlarge:
|
|
205
|
+
underline:
|
|
206
|
+
height: "0"
|
|
207
|
+
margin-top: "0"
|
|
208
|
+
searchbox-tabs:
|
|
209
|
+
border: "none"
|
|
210
|
+
border-color: "var(--tx-generic-color-primary-darker)"
|
|
211
|
+
hover:
|
|
212
|
+
background-color: "var(--tx-generic-color-primary-light)"
|
|
213
|
+
icon:
|
|
214
|
+
hover:
|
|
215
|
+
color: "var(--tx-generic-color-active)"
|
|
216
|
+
label:
|
|
217
|
+
hover:
|
|
218
|
+
color: "var(--tx-generic-color-blank)"
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
generic:
|
|
2
|
+
font:
|
|
3
|
+
primary:
|
|
4
|
+
weight:
|
|
5
|
+
heavy: "800"
|
|
6
|
+
font-family: "Linotte"
|
|
7
|
+
alternative:
|
|
8
|
+
font-family: "Linotte"
|
|
9
|
+
color:
|
|
10
|
+
accent-border: &accent-border "#49A345"
|
|
11
|
+
accent-border-hover: &accent-border-hover "#49AE44"
|
|
12
|
+
accent-bottom: &accent-bottom "#49A345"
|
|
13
|
+
accent-dark: &accent-dark "#A1D50A"
|
|
14
|
+
accent-darker: &accent-darker "#9ACA0F"
|
|
15
|
+
accent-light: &accent-light "#C1E35E"
|
|
16
|
+
accent-lighter: &accent-lighter "#C1E35E"
|
|
17
|
+
accent-top: &accent-top "#49A345"
|
|
18
|
+
accent: &accent "#9ACA0F"
|
|
19
|
+
|
|
20
|
+
active: &active "#00B0FF"
|
|
21
|
+
|
|
22
|
+
primary-darker: &primary-darker "#72368D"
|
|
23
|
+
primary-dark: &primary-dark "#72368D"
|
|
24
|
+
primary: &primary "#72368D"
|
|
25
|
+
primary-light: &primary-light "#7B4397"
|
|
26
|
+
primary-lighter: &primary-lighter "#894EA3"
|
|
27
|
+
primary-overlay: &primary-overlay "#9574B2"
|
|
28
|
+
|
|
29
|
+
secondary-darkest: &secondary-darkest "#B69CC6"
|
|
30
|
+
secondary-darker: &secondary-darker "#DACCE2"
|
|
31
|
+
secondary-dark: &secondary-dark "#F4F1F7"
|
|
32
|
+
secondary: &secondary "#EFEEE5"
|
|
33
|
+
secondary-light: &secondary-light "#F7F8F1"
|
|
34
|
+
secondary-lighter: &secondary-lighter "#F9FBF6"
|
|
35
|
+
|
|
36
|
+
text-dark: &text-dark "#29425B"
|
|
37
|
+
text: &text "#597385"
|
|
38
|
+
text-light: &text-light "#9DB1C0"
|
|
39
|
+
|
|
40
|
+
searchbox-tabs-border: &searchbox-tabs-border "#51216B"
|
|
41
|
+
separator:
|
|
42
|
+
color: &separator-color "var(--tx-generic-color-secondary-darker)"
|
|
43
|
+
image:
|
|
44
|
+
baggage-info:
|
|
45
|
+
suitcase: url(//s1.travix.com/budgetair/global/assets/images/icons/BUA_suitcase.png)
|
|
46
|
+
suitcase--2x: url(//s1.travix.com/budgetair/global/assets/images/icons/BUA_suitcase_@2x.png)
|
|
47
|
+
badge:
|
|
48
|
+
before:
|
|
49
|
+
border:
|
|
50
|
+
color: "var(--tx-generic-color-accent-border)"
|
|
51
|
+
after:
|
|
52
|
+
border:
|
|
53
|
+
color: "var(--tx-generic-color-accent-border)"
|
|
54
|
+
border:
|
|
55
|
+
bottom:
|
|
56
|
+
width: 0px
|
|
57
|
+
radius:
|
|
58
|
+
start: 6px
|
|
59
|
+
end: 15px # "end" variable is deprecated and should not be used in future. Use "end-top" and "end-bottom" instead
|
|
60
|
+
end-top: 15px
|
|
61
|
+
end-bottom: 15px
|
|
62
|
+
color:
|
|
63
|
+
text: "var(--tx-generic-color-blank)"
|
|
64
|
+
font-size: 13px
|
|
65
|
+
padding:
|
|
66
|
+
right-left: 10px
|
|
67
|
+
top-bottom: 8px
|
|
68
|
+
corner-side: 8px
|
|
69
|
+
# “button” section is deprecated. Please use values from “ui-button” section instead.
|
|
70
|
+
button:
|
|
71
|
+
size:
|
|
72
|
+
border-radius: 5px
|
|
73
|
+
ghost:
|
|
74
|
+
background: "transparent"
|
|
75
|
+
color: *primary-darker
|
|
76
|
+
border-color: *secondary-darker
|
|
77
|
+
border-radius: 5px
|
|
78
|
+
hover-color: "#00B0FF"
|
|
79
|
+
hover-border-color: "#01B0FF"
|
|
80
|
+
calendar:
|
|
81
|
+
nav:
|
|
82
|
+
button:
|
|
83
|
+
background-color-end: "var(--tx-generic-color-accent-darker)"
|
|
84
|
+
background-color-start: "var(--tx-generic-color-accent-darker)"
|
|
85
|
+
header-offer:
|
|
86
|
+
big-caption:
|
|
87
|
+
font-weight: "var(--tx-generic-font-primary-weight-heavy)"
|
|
88
|
+
text-shadow: "0px 5px 2px rgba(var(--tx-generic-color-shadow-rgb),0.5)"
|
|
89
|
+
disclaimer:
|
|
90
|
+
small:
|
|
91
|
+
position: "relative"
|
|
92
|
+
info-icon-wrapper:
|
|
93
|
+
small:
|
|
94
|
+
margin-right: "0"
|
|
95
|
+
top: "6px"
|
|
96
|
+
price:
|
|
97
|
+
display: "inline-block"
|
|
98
|
+
font-size: "32px"
|
|
99
|
+
font-weight: "var(--tx-generic-font-primary-weight-heavy)"
|
|
100
|
+
small:
|
|
101
|
+
asterisk:
|
|
102
|
+
position: "relative"
|
|
103
|
+
top: "-12px"
|
|
104
|
+
color: "var(--tx-generic-color-primary)"
|
|
105
|
+
currency:
|
|
106
|
+
font-size: "17px"
|
|
107
|
+
from:
|
|
108
|
+
font-size: "17px"
|
|
109
|
+
padding-bottom: "5px"
|
|
110
|
+
text-shadow: "none"
|
|
111
|
+
text-shadow: "0px 3px 2px rgba(var(--tx-generic-color-shadow-rgb),0.5)"
|
|
112
|
+
price:
|
|
113
|
+
asterisk:
|
|
114
|
+
xsmall:
|
|
115
|
+
line-height: 19px
|
|
116
|
+
small:
|
|
117
|
+
line-height: 12px
|
|
118
|
+
medium:
|
|
119
|
+
line-height: 12px
|
|
120
|
+
large:
|
|
121
|
+
line-height: 15px
|
|
122
|
+
xlarge:
|
|
123
|
+
line-height: 27px
|
|
124
|
+
currency:
|
|
125
|
+
xsmall:
|
|
126
|
+
line-height: 12px
|
|
127
|
+
decimals:
|
|
128
|
+
xsmall:
|
|
129
|
+
line-height: 19px
|
|
130
|
+
small:
|
|
131
|
+
line-height: 12px
|
|
132
|
+
medium:
|
|
133
|
+
line-height: 12px
|
|
134
|
+
large:
|
|
135
|
+
line-height: 15px
|
|
136
|
+
xlarge:
|
|
137
|
+
line-height: 27px
|
|
138
|
+
spinner:
|
|
139
|
+
color:
|
|
140
|
+
light: "var(--tx-generic-color-blank)"
|
|
141
|
+
lighter: "var(--tx-generic-color-secondary-darker)"
|
|
142
|
+
dark: "var(--tx-generic-color-secondary-darkest)"
|
|
143
|
+
darker: "var(--tx-generic-color-primary)"
|
|
144
|
+
searchbox-tabs:
|
|
145
|
+
border-color: "var(--tx-generic-color-searchbox-tabs-border)"
|
|
146
|
+
hover:
|
|
147
|
+
background-color: "var(--tx-generic-color-primary-lighter)"
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
generic:
|
|
2
|
+
font:
|
|
3
|
+
primary:
|
|
4
|
+
font-family: "Khand"
|
|
5
|
+
secondary:
|
|
6
|
+
font-family: "Roboto"
|
|
7
|
+
alternative:
|
|
8
|
+
font-family: "Handlee"
|
|
9
|
+
color:
|
|
10
|
+
accent-border: &accent-border "#E6BB00"
|
|
11
|
+
accent-border-hover: &accent-border-hover "#F7CB00"
|
|
12
|
+
accent-bottom: &accent-bottom "#F7DE00"
|
|
13
|
+
accent-dark: &accent-dark "#FFF23E"
|
|
14
|
+
accent-darker: &accent-darker "#DAAB00"
|
|
15
|
+
accent-light: &accent-light "#FAF18F"
|
|
16
|
+
accent-lighter: &accent-lighter "#FAF18F"
|
|
17
|
+
accent-top: &accent-top "#F6E500"
|
|
18
|
+
accent: &accent "#F6E41F"
|
|
19
|
+
|
|
20
|
+
primary-darker: &primary-darker "#003F7F"
|
|
21
|
+
primary-dark: &primary-dark "#004B94"
|
|
22
|
+
primary: &primary "#0056A9"
|
|
23
|
+
primary-light: &primary-light "#005FBB"
|
|
24
|
+
primary-lighter: &primary-lighter "#006CD2"
|
|
25
|
+
primary-overlay: &primary-overlay "#4A7BA9"
|
|
26
|
+
|
|
27
|
+
secondary-darkest: &secondary-darkest "#7EA6D4"
|
|
28
|
+
secondary-darker: &secondary-darker "#ADC9EA"
|
|
29
|
+
secondary-dark: &secondary-dark "#BDD8F1"
|
|
30
|
+
secondary: &secondary "#D5E8F8"
|
|
31
|
+
secondary-light: &secondary-light "#EBF5FD"
|
|
32
|
+
secondary-lighter: &secondary-lighter "#F7FBFE"
|
|
33
|
+
|
|
34
|
+
text-darker: &text-darker "#2B4352"
|
|
35
|
+
text-dark: &text-dark "#29425B"
|
|
36
|
+
text: &text "#597385"
|
|
37
|
+
text-light: &text-light "#78909F"
|
|
38
|
+
text-shadow: &text-shadow "#7890A1"
|
|
39
|
+
text-lighter: &text-lighter "#9DB1C0"
|
|
40
|
+
|
|
41
|
+
active: &active "#00B0FF"
|
|
42
|
+
positive-dark: &positive-dark "#3CB761"
|
|
43
|
+
positive: &positive "#00B250"
|
|
44
|
+
positive-light: &positive-light "#9EDB97"
|
|
45
|
+
negative: &negative "#D2373F"
|
|
46
|
+
negative-light: &negative-light "#F4CDCF"
|
|
47
|
+
disabled: &disabled "#C5DCF6"
|
|
48
|
+
|
|
49
|
+
shadow: &shadow "#000000"
|
|
50
|
+
shadow-bottom: &shadow-bottom "#BCD8F2"
|
|
51
|
+
shadow-alt: &shadow-alt "#00196F"
|
|
52
|
+
blank: &blank "#FFFFFF"
|
|
53
|
+
|
|
54
|
+
facebook: &facebook "#45619D"
|
|
55
|
+
facebook-border: &facebook-border "#324A87"
|
|
56
|
+
twitter: &twitter "#08ACEE"
|
|
57
|
+
twitter-border: &twitter-border "#1871C0"
|
|
58
|
+
google: &google "#B30303"
|
|
59
|
+
google-border: &google-border "#670E00"
|
|
60
|
+
instagram-top: &instagram-top "#D9375C"
|
|
61
|
+
instagram-bottom: &instagram-bottom "#f05c34"
|
|
62
|
+
instagram-border: &instagram-border "#C32E15"
|
|
63
|
+
mail: &mail "#006CD2"
|
|
64
|
+
mail-border: &mail-border "#0A50A3"
|
|
65
|
+
|
|
66
|
+
sticky-tabs-link: &sticky-tabs-link "#00B0FF"
|
|
67
|
+
trust-pilot-stars: &trust-pilot-stars "#F6E41F"
|
|
68
|
+
separator:
|
|
69
|
+
style: &separator-style dashed
|
|
70
|
+
size:
|
|
71
|
+
border-radius-small: &border-radius-small "5px"
|
|
72
|
+
badge:
|
|
73
|
+
before:
|
|
74
|
+
border:
|
|
75
|
+
color: "var(--tx-generic-color-shadow-alt)"
|
|
76
|
+
after:
|
|
77
|
+
border:
|
|
78
|
+
color: "var(--tx-generic-color-primary-dark)"
|
|
79
|
+
ui-button:
|
|
80
|
+
default:
|
|
81
|
+
normal:
|
|
82
|
+
bg-top: *accent-top
|
|
83
|
+
bg-bottom: *accent-bottom
|
|
84
|
+
border-radius: 5px
|
|
85
|
+
shadow: "0 3px var(--tx-generic-color-accent-border), -5px 8px rgba(0, 0, 0, .15)"
|
|
86
|
+
text: *primary-darker
|
|
87
|
+
text-shadow: none
|
|
88
|
+
hover:
|
|
89
|
+
top: -2px
|
|
90
|
+
shadow: "0 5px var(--tx-generic-color-accent-border), -5px 10px rgba(0, 0, 0, .15)"
|
|
91
|
+
active:
|
|
92
|
+
shadow: "0 3px var(--tx-generic-color-accent-border)"
|
|
93
|
+
ghost:
|
|
94
|
+
normal:
|
|
95
|
+
border-radius: 4px
|
|
96
|
+
# “button” section is deprecated. Please use values from “ui-button” section instead.
|
|
97
|
+
button:
|
|
98
|
+
color:
|
|
99
|
+
bg-top: "var(--tx-generic-color-accent)"
|
|
100
|
+
bg-bottom: "var(--tx-generic-color-accent)"
|
|
101
|
+
text: "var(--tx-generic-color-primary-darker)"
|
|
102
|
+
border: "var(--tx-generic-color-accent-darker)"
|
|
103
|
+
shadow: "transparent"
|
|
104
|
+
disabled:
|
|
105
|
+
bg-top: "var(--tx-generic-color-secondary-dark)"
|
|
106
|
+
bg-bottom: "var(--tx-generic-color-secondary-dark)"
|
|
107
|
+
text: "var(--tx-generic-color-secondary-darker)"
|
|
108
|
+
border: "transparent"
|
|
109
|
+
border-bottom: "var(--tx-generic-color-secondary-darkest)"
|
|
110
|
+
shadow: "0 3px var(--tx-generic-color-accent-border), -5px 7px rgba(0, 0, 0, .15)"
|
|
111
|
+
shadow-hover: "0 5px var(--tx-generic-color-accent-border), -5px 9px rgba(0, 0, 0, .15)"
|
|
112
|
+
size:
|
|
113
|
+
border-radius: *border-radius-small
|
|
114
|
+
ghost:
|
|
115
|
+
background: "transparent"
|
|
116
|
+
color: "var(--tx-generic-color-primary-darker)"
|
|
117
|
+
border-color: "var(--tx-generic-color-secondary-darker)"
|
|
118
|
+
border: "3px solid var(--tx-button-ghost-border-color)"
|
|
119
|
+
border-radius: 3px
|
|
120
|
+
font-family: "var(--tx-generic-font-primary-font-family)"
|
|
121
|
+
hover-color: "var(--tx-generic-color-active)"
|
|
122
|
+
hover-border-color: "var(--tx-generic-color-active)"
|
|
123
|
+
dropdown:
|
|
124
|
+
select-option:
|
|
125
|
+
hover:
|
|
126
|
+
background-color: "var(--tx-generic-color-secondary-light)"
|
|
127
|
+
select-arrow-zone:
|
|
128
|
+
border-color-left: "var(--tx-generic-color-secondary-dark)"
|
|
129
|
+
border-style: "dashed"
|
|
130
|
+
color: "var(--tx-generic-color-primary-lighter)"
|
|
131
|
+
price:
|
|
132
|
+
asterisk:
|
|
133
|
+
xsmall:
|
|
134
|
+
line-height: 19px
|
|
135
|
+
small:
|
|
136
|
+
line-height: 12px
|
|
137
|
+
medium:
|
|
138
|
+
line-height: 12px
|
|
139
|
+
large:
|
|
140
|
+
line-height: 15px
|
|
141
|
+
xlarge:
|
|
142
|
+
line-height: 25px
|
|
143
|
+
currency:
|
|
144
|
+
xsmall:
|
|
145
|
+
line-height: 12px
|
|
146
|
+
small:
|
|
147
|
+
line-height: 17px
|
|
148
|
+
medium:
|
|
149
|
+
line-height: 17px
|
|
150
|
+
large:
|
|
151
|
+
line-height: 22px
|
|
152
|
+
xlarge:
|
|
153
|
+
line-height: 37px
|
|
154
|
+
decimals:
|
|
155
|
+
xsmall:
|
|
156
|
+
line-height: 19px
|
|
157
|
+
small:
|
|
158
|
+
line-height: 12px
|
|
159
|
+
medium:
|
|
160
|
+
line-height: 12px
|
|
161
|
+
large:
|
|
162
|
+
line-height: 15px
|
|
163
|
+
xlarge:
|
|
164
|
+
line-height: 25px
|
|
165
|
+
xsmall:
|
|
166
|
+
underline:
|
|
167
|
+
height: "3px"
|
|
168
|
+
margin-top: "2px"
|
|
169
|
+
small:
|
|
170
|
+
underline:
|
|
171
|
+
height: "4px"
|
|
172
|
+
margin-top: "2px"
|
|
173
|
+
medium:
|
|
174
|
+
underline:
|
|
175
|
+
height: "6px"
|
|
176
|
+
margin-top: "2px"
|
|
177
|
+
large:
|
|
178
|
+
underline:
|
|
179
|
+
height: "6px"
|
|
180
|
+
margin-top: "2px"
|
|
181
|
+
xlarge:
|
|
182
|
+
underline:
|
|
183
|
+
height: "8px"
|
|
184
|
+
margin-top: "2px"
|
|
185
|
+
spinner:
|
|
186
|
+
color:
|
|
187
|
+
light: "var(--tx-generic-color-secondary-lighter)"
|
|
188
|
+
lighter: "var(--tx-generic-color-secondary-dark)"
|
|
189
|
+
searchbox-tabs:
|
|
190
|
+
border: "1px solid var(--tx-generic-color-primary-darker)"
|
|
191
|
+
icon:
|
|
192
|
+
hover:
|
|
193
|
+
color: "var(--tx-generic-color-accent)"
|
|
194
|
+
label:
|
|
195
|
+
hover:
|
|
196
|
+
color: "var(--tx-generic-color-accent)"
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
generic:
|
|
2
|
+
font:
|
|
3
|
+
primary:
|
|
4
|
+
weight:
|
|
5
|
+
heavy: "800"
|
|
6
|
+
font-family: "Linotte"
|
|
7
|
+
alternative:
|
|
8
|
+
font-family: "Linotte"
|
|
9
|
+
color:
|
|
10
|
+
accent-border: &accent-border "#49A345"
|
|
11
|
+
accent-border-hover: &accent-border-hover "#49AE44"
|
|
12
|
+
accent-bottom: &accent-bottom "#49A345"
|
|
13
|
+
accent-dark: &accent-dark "#A1D50A"
|
|
14
|
+
accent-darker: &accent-darker "#9ACA0F"
|
|
15
|
+
accent-light: &accent-light "#C1E35E"
|
|
16
|
+
accent-lighter: &accent-lighter "#C1E35E"
|
|
17
|
+
accent-top: &accent-top "#49A345"
|
|
18
|
+
accent: &accent "#9ACA0F"
|
|
19
|
+
|
|
20
|
+
active: &active "#01B0FF"
|
|
21
|
+
|
|
22
|
+
primary-darker: &primary-darker "#72368D"
|
|
23
|
+
primary-dark: &primary-dark "#72368D"
|
|
24
|
+
primary: &primary "#72368D"
|
|
25
|
+
primary-light: &primary-light "#7B4397"
|
|
26
|
+
primary-lighter: &primary-lighter "#894EA3"
|
|
27
|
+
primary-overlay: &primary-overlay "#9574B2"
|
|
28
|
+
|
|
29
|
+
secondary-darkest: &secondary-darkest "#B69CC6"
|
|
30
|
+
secondary-darker: &secondary-darker "#DACCE2"
|
|
31
|
+
secondary-dark: &secondary-dark "#F4F1F7"
|
|
32
|
+
secondary: &secondary "#EFEEE5"
|
|
33
|
+
secondary-rgb: &secondary-rgb ${rgb(secondary)}
|
|
34
|
+
secondary-light: &secondary-light "#F7F8F1"
|
|
35
|
+
secondary-lighter: &secondary-lighter "#F9FBF6"
|
|
36
|
+
|
|
37
|
+
text-dark: &text-dark "#29425B"
|
|
38
|
+
text: &text "#597385"
|
|
39
|
+
text-light: &text-light "#9DB1C0"
|
|
40
|
+
|
|
41
|
+
searchbox-tabs-border: &searchbox-tabs-border "#51216B"
|
|
42
|
+
separator:
|
|
43
|
+
color: &separator-color "var(--tx-generic-color-secondary-darker)"
|
|
44
|
+
image:
|
|
45
|
+
baggage-info:
|
|
46
|
+
suitcase: url(//s1.travix.com/budgetair/global/assets/images/icons/BUA_suitcase.png)
|
|
47
|
+
suitcase--2x: url(//s1.travix.com/budgetair/global/assets/images/icons/BUA_suitcase_@2x.png)
|
|
48
|
+
badge:
|
|
49
|
+
before:
|
|
50
|
+
border:
|
|
51
|
+
color: "var(--tx-generic-color-accent-border)"
|
|
52
|
+
after:
|
|
53
|
+
border:
|
|
54
|
+
color: "var(--tx-generic-color-accent-border)"
|
|
55
|
+
border:
|
|
56
|
+
bottom:
|
|
57
|
+
width: 0px
|
|
58
|
+
radius:
|
|
59
|
+
start: 6px
|
|
60
|
+
end: 15px # "end" variable is deprecated and should not be used in future. Use "end-top" and "end-bottom" instead
|
|
61
|
+
end-top: 15px
|
|
62
|
+
end-bottom: 15px
|
|
63
|
+
color:
|
|
64
|
+
text: "var(--tx-generic-color-blank)"
|
|
65
|
+
font-size: 13px
|
|
66
|
+
padding:
|
|
67
|
+
right-left: 10px
|
|
68
|
+
top-bottom: 8px
|
|
69
|
+
corner-side: 8px
|
|
70
|
+
spinner:
|
|
71
|
+
color:
|
|
72
|
+
light: "var(--tx-generic-color-blank)"
|
|
73
|
+
lighter: "var(--tx-generic-color-secondary-darker)"
|
|
74
|
+
dark: "var(--tx-generic-color-secondary-darkest)"
|
|
75
|
+
darker: "var(--tx-generic-color-primary)"
|
|
76
|
+
# “button” section is deprecated. Please use values from “ui-button” section instead.
|
|
77
|
+
button:
|
|
78
|
+
size:
|
|
79
|
+
border-radius: 5px
|
|
80
|
+
ghost:
|
|
81
|
+
background: "transparent"
|
|
82
|
+
color: *primary-darker
|
|
83
|
+
border-color: *secondary-darker
|
|
84
|
+
border-radius: 5px
|
|
85
|
+
hover-color: "#00B0FF"
|
|
86
|
+
hover-border-color: "#01B0FF"
|
|
87
|
+
calendar:
|
|
88
|
+
nav:
|
|
89
|
+
button:
|
|
90
|
+
background-color-end: "var(--tx-generic-color-accent-darker)"
|
|
91
|
+
background-color-start: "var(--tx-generic-color-accent-darker)"
|
|
92
|
+
header-offer:
|
|
93
|
+
big-caption:
|
|
94
|
+
font-weight: "var(--tx-generic-font-primary-weight-heavy)"
|
|
95
|
+
text-shadow: "0px 5px 2px rgba(var(--tx-generic-color-shadow-rgb),0.5)"
|
|
96
|
+
disclaimer:
|
|
97
|
+
small:
|
|
98
|
+
position: "relative"
|
|
99
|
+
info-icon-wrapper:
|
|
100
|
+
small:
|
|
101
|
+
margin-right: "0"
|
|
102
|
+
top: "6px"
|
|
103
|
+
price:
|
|
104
|
+
display: "inline-block"
|
|
105
|
+
font-size: "34px"
|
|
106
|
+
font-weight: "var(--tx-generic-font-primary-weight-heavy)"
|
|
107
|
+
small:
|
|
108
|
+
asterisk:
|
|
109
|
+
position: "relative"
|
|
110
|
+
top: "-12px"
|
|
111
|
+
color: "var(--tx-generic-color-primary)"
|
|
112
|
+
currency:
|
|
113
|
+
font-size: "17px"
|
|
114
|
+
font-size: "38px"
|
|
115
|
+
from:
|
|
116
|
+
font-size: "17px"
|
|
117
|
+
padding-bottom: "5px"
|
|
118
|
+
text-shadow: "none"
|
|
119
|
+
text-shadow: "0px 3px 2px rgba(var(--tx-generic-color-shadow-rgb),0.5)"
|
|
120
|
+
price:
|
|
121
|
+
asterisk:
|
|
122
|
+
xsmall:
|
|
123
|
+
line-height: 19px
|
|
124
|
+
small:
|
|
125
|
+
line-height: 12px
|
|
126
|
+
medium:
|
|
127
|
+
line-height: 12px
|
|
128
|
+
large:
|
|
129
|
+
line-height: 15px
|
|
130
|
+
xlarge:
|
|
131
|
+
line-height: 27px
|
|
132
|
+
currency:
|
|
133
|
+
xsmall:
|
|
134
|
+
line-height: 12px
|
|
135
|
+
decimals:
|
|
136
|
+
xsmall:
|
|
137
|
+
line-height: 19px
|
|
138
|
+
small:
|
|
139
|
+
line-height: 12px
|
|
140
|
+
medium:
|
|
141
|
+
line-height: 12px
|
|
142
|
+
large:
|
|
143
|
+
line-height: 15px
|
|
144
|
+
xlarge:
|
|
145
|
+
line-height: 27px
|
|
146
|
+
searchbox-tabs:
|
|
147
|
+
border-color: "var(--tx-generic-color-searchbox-tabs-border)"
|
|
148
|
+
hover:
|
|
149
|
+
background-color: "var(--tx-generic-color-primary-lighter)"
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
generic:
|
|
2
|
+
color:
|
|
3
|
+
accent-border: &accent-border "#49A345"
|
|
4
|
+
accent-border-hover: &accent-border-hover "#49AE44"
|
|
5
|
+
accent-bottom: &accent-bottom "#49A345"
|
|
6
|
+
accent-dark: &accent-dark "#A1D50A"
|
|
7
|
+
accent-darker: &accent-darker "#9ACA0F"
|
|
8
|
+
accent-light: &accent-light "#C1E35E"
|
|
9
|
+
accent-lighter: &accent-lighter "#C1E35E"
|
|
10
|
+
accent-top: &accent-top "#49A345"
|
|
11
|
+
accent: &accent "#9ACA0F"
|
|
12
|
+
|
|
13
|
+
primary-darker: &primary-darker "#72368D"
|
|
14
|
+
primary-dark: &primary-dark "#72368D"
|
|
15
|
+
primary: &primary "#72368D"
|
|
16
|
+
primary-light: &primary-light "#7B4397"
|
|
17
|
+
primary-lighter: &primary-lighter "#894EA3"
|
|
18
|
+
primary-overlay: &primary-overlay "#9574B2"
|
|
19
|
+
|
|
20
|
+
secondary-darkest: &secondary-darkest "#B69CC6"
|
|
21
|
+
secondary-darker: &secondary-darker "#DACCE2"
|
|
22
|
+
secondary-dark: &secondary-dark "#F4F1F7"
|
|
23
|
+
secondary: &secondary "#EFEEE5"
|
|
24
|
+
secondary-light: &secondary-light "#F7F8F1"
|
|
25
|
+
secondary-lighter: &secondary-lighter "#F9FBF6"
|
|
26
|
+
|
|
27
|
+
text-dark: &text-dark "#29425B"
|
|
28
|
+
text: &text "#597385"
|
|
29
|
+
text-light: &text-light "#9DB1C0"
|
|
30
|
+
|
|
31
|
+
searchbox-tabs-border: &searchbox-tabs-border "#51216B"
|
|
32
|
+
image:
|
|
33
|
+
baggage-info:
|
|
34
|
+
suitcase: url(//s1.travix.com/budgetair/global/assets/images/icons/BUA_suitcase.png)
|
|
35
|
+
suitcase--2x: url(//s1.travix.com/budgetair/global/assets/images/icons/BUA_suitcase_@2x.png)
|
|
36
|
+
spinner:
|
|
37
|
+
color:
|
|
38
|
+
light: "var(--tx-generic-color-blank)"
|
|
39
|
+
lighter: "var(--tx-generic-color-secondary-darker)"
|
|
40
|
+
dark: "var(--tx-generic-color-secondary-darkest)"
|
|
41
|
+
searchbox-tabs:
|
|
42
|
+
border-color: "var(--tx-generic-color-searchbox-tabs-border)"
|
|
43
|
+
calendar:
|
|
44
|
+
nav:
|
|
45
|
+
button:
|
|
46
|
+
background-color-end: "var(--tx-generic-color-accent-darker)"
|
|
47
|
+
background-color-start: "var(--tx-generic-color-accent-darker)"
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
generic:
|
|
2
|
+
font:
|
|
3
|
+
primary:
|
|
4
|
+
weight:
|
|
5
|
+
heavy: "800"
|
|
6
|
+
font-family: "Linotte"
|
|
7
|
+
alternative:
|
|
8
|
+
font-family: "Linotte"
|
|
9
|
+
color:
|
|
10
|
+
accent-border: &accent-border "#F04C2A"
|
|
11
|
+
accent-border-hover: &accent-border-hover "#F85D2E"
|
|
12
|
+
accent-bottom: &accent-bottom "#F04C2A"
|
|
13
|
+
accent-dark: &accent-dark "#FF9000"
|
|
14
|
+
accent-darker: &accent-darker "#FF7F00"
|
|
15
|
+
accent-light: &accent-light "#FFAD5B"
|
|
16
|
+
accent-lighter: &accent-lighter "#FFAD5B"
|
|
17
|
+
accent-top: &accent-top "#F04C2A"
|
|
18
|
+
accent: &accent "#FF7F00"
|
|
19
|
+
|
|
20
|
+
active: &active "#00B0FF"
|
|
21
|
+
|
|
22
|
+
primary-darker: &primary-darker "#007CC3"
|
|
23
|
+
primary-dark: &primary-dark "#007CC3"
|
|
24
|
+
primary: &primary "#007CC3"
|
|
25
|
+
primary-light: &primary-light "#0185D1"
|
|
26
|
+
primary-lighter: &primary-lighter "#1A91DA"
|
|
27
|
+
primary-overlay: &primary-overlay "#F4F1F7"
|
|
28
|
+
|
|
29
|
+
positive: &positive "#92BE14"
|
|
30
|
+
positive-lighter: &positive-lighter "#ADCE4F"
|
|
31
|
+
positive-rgb: &positive-rgb "146,190,20"
|
|
32
|
+
|
|
33
|
+
secondary-darkest: &secondary-darkest "#62BBEE"
|
|
34
|
+
secondary-darker: &secondary-darker "#B3DFF9"
|
|
35
|
+
secondary-dark: &secondary-dark "#D9EFFC"
|
|
36
|
+
secondary: &secondary "#EFEEE5"
|
|
37
|
+
secondary-light: &secondary-light "#F7F8F1"
|
|
38
|
+
secondary-lighter: &secondary-lighter "#F9FBF6"
|
|
39
|
+
blank: &blank "#FFFFFF"
|
|
40
|
+
|
|
41
|
+
searchbox-tabs-border: &searchbox-tabs-border "#005A99"
|
|
42
|
+
separator:
|
|
43
|
+
color: &separator-color "var(--tx-generic-color-secondary-darker)"
|
|
44
|
+
size:
|
|
45
|
+
border-radius-small: &border-radius-small "6px"
|
|
46
|
+
image:
|
|
47
|
+
baggage-info:
|
|
48
|
+
suitcase: url(//s1.travix.com/vayama/global/assets/images/icons/VAY_suitcase.png)
|
|
49
|
+
suitcase--2x: url(//s1.travix.com/vayama/global/assets/images/icons/VAY_suitcase_@2x.png)
|
|
50
|
+
badge:
|
|
51
|
+
before:
|
|
52
|
+
border:
|
|
53
|
+
color: "var(--tx-generic-color-accent-border)"
|
|
54
|
+
after:
|
|
55
|
+
border:
|
|
56
|
+
color: "var(--tx-generic-color-accent-border)"
|
|
57
|
+
border:
|
|
58
|
+
bottom:
|
|
59
|
+
width: 0px
|
|
60
|
+
radius:
|
|
61
|
+
start: 6px
|
|
62
|
+
end: 15px # "end" variable is deprecated and should not be used in future. Use "end-top" and "end-bottom" instead
|
|
63
|
+
end-top: 15px
|
|
64
|
+
end-bottom: 15px
|
|
65
|
+
color:
|
|
66
|
+
text: "var(--tx-generic-color-blank)"
|
|
67
|
+
font-size: 13px
|
|
68
|
+
padding:
|
|
69
|
+
right-left: 10px
|
|
70
|
+
top-bottom: 8px
|
|
71
|
+
corner-side: 8px
|
|
72
|
+
# “button” section is deprecated. Please use values from “ui-button” section instead.
|
|
73
|
+
button:
|
|
74
|
+
shadow: "0 3px var(--tx-generic-color-accent-border), -5px 7px transparent"
|
|
75
|
+
shadow-inner-color: "var(--tx-generic-color-accent-border)"
|
|
76
|
+
shadow-outer:
|
|
77
|
+
color: "transparent"
|
|
78
|
+
hover-params: "-5px 9px"
|
|
79
|
+
ghost:
|
|
80
|
+
background: "transparent"
|
|
81
|
+
color: *primary-darker
|
|
82
|
+
border-color: *secondary-darker
|
|
83
|
+
border-radius: 5px
|
|
84
|
+
hover-color: "#1AD7FD"
|
|
85
|
+
hover-border-color: "#1AD7FD"
|
|
86
|
+
size:
|
|
87
|
+
border-radius: "var(--tx-generic-size-border-radius-small)"
|
|
88
|
+
header-offer:
|
|
89
|
+
airline-logo-container:
|
|
90
|
+
margin-top: "14px"
|
|
91
|
+
big-caption:
|
|
92
|
+
font-weight: "var(--tx-generic-font-primary-weight-heavy)"
|
|
93
|
+
text-shadow: "0px 5px 2px rgba(var(--tx-generic-color-shadow-rgb),0.5)"
|
|
94
|
+
group-2:
|
|
95
|
+
min-height: "0"
|
|
96
|
+
container:
|
|
97
|
+
height: "225px"
|
|
98
|
+
price:
|
|
99
|
+
display: "inline-block"
|
|
100
|
+
font-size: "34px"
|
|
101
|
+
font-weight: "var(--tx-generic-font-primary-weight-heavy)"
|
|
102
|
+
small:
|
|
103
|
+
color: "var(--tx-generic-color-primary)"
|
|
104
|
+
currency:
|
|
105
|
+
font-size: "17px"
|
|
106
|
+
from:
|
|
107
|
+
font-size: "17px"
|
|
108
|
+
padding-bottom: "5px"
|
|
109
|
+
text-shadow: "none"
|
|
110
|
+
text-shadow: "0px 3px 2px rgba(var(--tx-generic-color-shadow-rgb),0.5)"
|
|
111
|
+
price:
|
|
112
|
+
asterisk:
|
|
113
|
+
xsmall:
|
|
114
|
+
line-height: 19px
|
|
115
|
+
small:
|
|
116
|
+
line-height: 12px
|
|
117
|
+
medium:
|
|
118
|
+
line-height: 12px
|
|
119
|
+
large:
|
|
120
|
+
line-height: 15px
|
|
121
|
+
xlarge:
|
|
122
|
+
line-height: 27px
|
|
123
|
+
currency:
|
|
124
|
+
xsmall:
|
|
125
|
+
line-height: 12px
|
|
126
|
+
decimals:
|
|
127
|
+
xsmall:
|
|
128
|
+
line-height: 19px
|
|
129
|
+
small:
|
|
130
|
+
line-height: 12px
|
|
131
|
+
medium:
|
|
132
|
+
line-height: 12px
|
|
133
|
+
large:
|
|
134
|
+
line-height: 15px
|
|
135
|
+
xlarge:
|
|
136
|
+
line-height: 27px
|
|
137
|
+
spinner:
|
|
138
|
+
color:
|
|
139
|
+
light: "var(--tx-generic-color-secondary-lighter)"
|
|
140
|
+
lighter: "var(--tx-generic-color-secondary-darkest)"
|
|
141
|
+
darker: "var(--tx-generic-color-primary)"
|
|
142
|
+
searchbox-tabs:
|
|
143
|
+
border-color: "var(--tx-generic-color-searchbox-tabs-border)"
|
|
144
|
+
hover:
|
|
145
|
+
background-color: "var(--tx-generic-color-primary-lighter)"
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
generic:
|
|
2
|
+
font:
|
|
3
|
+
primary:
|
|
4
|
+
weight:
|
|
5
|
+
regular: "400"
|
|
6
|
+
medium: "500"
|
|
7
|
+
semibold: "600"
|
|
8
|
+
bold: "700"
|
|
9
|
+
font-family: "Signika Negative"
|
|
10
|
+
alternative:
|
|
11
|
+
font-family: "Handlee"
|
|
12
|
+
color:
|
|
13
|
+
accent-border: &accent-border "#BF1435"
|
|
14
|
+
accent-border-hover: &accent-border-hover "#D93656"
|
|
15
|
+
accent-bottom: &accent-bottom "#F55B70"
|
|
16
|
+
accent-dark: &accent-dark "#FF7184"
|
|
17
|
+
accent-darker: &accent-darker "#F24D67"
|
|
18
|
+
accent-lighter: &accent-lighter "#F4778B"
|
|
19
|
+
accent-light: &accent-light "#F4778B"
|
|
20
|
+
accent-top: &accent-top "#F55B70"
|
|
21
|
+
accent: &accent "#F24D67"
|
|
22
|
+
|
|
23
|
+
primary-darker: &primary-darker "#34439F"
|
|
24
|
+
primary-dark: &primary-dark "#34439F"
|
|
25
|
+
primary: &primary "#34439F"
|
|
26
|
+
primary-light: &primary-light "#3848AA"
|
|
27
|
+
primary-lighter: &primary-lighter "#4757B9"
|
|
28
|
+
primary-overlay: &primary-overlay "#6C7DBE"
|
|
29
|
+
|
|
30
|
+
secondary-darkest: &secondary-darkest "#93A4D7"
|
|
31
|
+
secondary-darker: &secondary-darker "#BDC4E4"
|
|
32
|
+
secondary-dark: &secondary-dark "#D4DBEE"
|
|
33
|
+
secondary: &secondary "#F6EBE1"
|
|
34
|
+
secondary-light: &secondary-light "#EAEEF8"
|
|
35
|
+
secondary-lighter: &secondary-lighter "#FCF8F4"
|
|
36
|
+
|
|
37
|
+
text-dark: &text-dark "#414141"
|
|
38
|
+
text: &text "#757575"
|
|
39
|
+
text-lighter: &text-lighter "#BDBDBD"
|
|
40
|
+
|
|
41
|
+
active: &active "#40CAFF"
|
|
42
|
+
active-lighter: &active-lighter "#81DAFF"
|
|
43
|
+
|
|
44
|
+
searchbox-tabs-border: &searchbox-tabs-border "#212C7C"
|
|
45
|
+
separator:
|
|
46
|
+
color: &separator-color "var(--tx-generic-color-secondary-dark)"
|
|
47
|
+
image:
|
|
48
|
+
baggage-info:
|
|
49
|
+
suitcase: url(//s1.travix.com/vliegwinkel/global/assets/images/icons/VW_suitcase.png)
|
|
50
|
+
suitcase--2x: url(//s1.travix.com/vliegwinkel/global/assets/images/icons/VW_suitcase_@2x.png)
|
|
51
|
+
ui-button:
|
|
52
|
+
default:
|
|
53
|
+
normal:
|
|
54
|
+
border-radius: 5px
|
|
55
|
+
ghost:
|
|
56
|
+
normal:
|
|
57
|
+
border-radius: 5px
|
|
58
|
+
badge:
|
|
59
|
+
before:
|
|
60
|
+
border:
|
|
61
|
+
color: "var(--tx-generic-color-accent-border)"
|
|
62
|
+
after:
|
|
63
|
+
border:
|
|
64
|
+
color: "var(--tx-generic-color-accent-border)"
|
|
65
|
+
border:
|
|
66
|
+
bottom:
|
|
67
|
+
width: 0px
|
|
68
|
+
radius:
|
|
69
|
+
start: 3px
|
|
70
|
+
end-top: 3px
|
|
71
|
+
end-bottom: 12px
|
|
72
|
+
color:
|
|
73
|
+
text: "var(--tx-generic-color-blank)"
|
|
74
|
+
font-size: 13px
|
|
75
|
+
padding:
|
|
76
|
+
right-left: 8px # "right-left" variable is deprecated and should not be used in future
|
|
77
|
+
top-bottom: 8px
|
|
78
|
+
corner-side: 8px
|
|
79
|
+
# “button” section is deprecated. Please use values from “ui-button” section instead.
|
|
80
|
+
button:
|
|
81
|
+
ghost:
|
|
82
|
+
background: "transparent"
|
|
83
|
+
color: *primary-darker
|
|
84
|
+
border-color: *secondary-darker
|
|
85
|
+
border-radius: 5px
|
|
86
|
+
hover-color: "#1AD7FD"
|
|
87
|
+
hover-border-color: "#1AD7FD"
|
|
88
|
+
header-offer:
|
|
89
|
+
group-2:
|
|
90
|
+
margin-bottom: "20px"
|
|
91
|
+
min-height: "60px"
|
|
92
|
+
info-icon-wrapper:
|
|
93
|
+
top: "6px"
|
|
94
|
+
price:
|
|
95
|
+
font-size: "36px"
|
|
96
|
+
from:
|
|
97
|
+
font-size: "24px"
|
|
98
|
+
small:
|
|
99
|
+
color: "var(--tx-generic-color-primary)"
|
|
100
|
+
price:
|
|
101
|
+
asterisk:
|
|
102
|
+
xsmall:
|
|
103
|
+
line-height: 20px
|
|
104
|
+
small:
|
|
105
|
+
line-height: 14px
|
|
106
|
+
medium:
|
|
107
|
+
line-height: 14px
|
|
108
|
+
large:
|
|
109
|
+
line-height: 18px
|
|
110
|
+
xlarge:
|
|
111
|
+
line-height: 30px
|
|
112
|
+
currency:
|
|
113
|
+
xsmall:
|
|
114
|
+
line-height: 12px
|
|
115
|
+
decimals:
|
|
116
|
+
xsmall:
|
|
117
|
+
line-height: 20px
|
|
118
|
+
small:
|
|
119
|
+
line-height: 14px
|
|
120
|
+
medium:
|
|
121
|
+
line-height: 14px
|
|
122
|
+
large:
|
|
123
|
+
line-height: 18px
|
|
124
|
+
xlarge:
|
|
125
|
+
line-height: 30px
|
|
126
|
+
spinner:
|
|
127
|
+
color:
|
|
128
|
+
light: "var(--tx-generic-color-secondary-lighter)"
|
|
129
|
+
lighter: "var(--tx-generic-color-primary-lighter)"
|
|
130
|
+
searchbox-tabs:
|
|
131
|
+
border-color: "var(--tx-generic-color-searchbox-tabs-border)"
|
|
132
|
+
hover:
|
|
133
|
+
background-color: "var(--tx-generic-color-primary-lighter)"
|