@cfx-dev/ui-components 3.0.0 → 3.0.2
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/LICENSE +20 -20
- package/README.md +38 -38
- package/dist/components/Logos/LogosShowcase.js +2 -2
- package/dist/components/Logos/cfx/CompositeLogo.js +74 -14
- package/dist/components/Tabular/Tabular.d.ts +1 -1
- package/dist/components/Tabular/TabularShowcase.js +33 -15
- package/dist/styles-scss/_colors.scss +211 -211
- package/dist/styles-scss/_typography.scss +51 -51
- package/dist/styles-scss/_ui.scss +359 -359
- package/dist/styles-scss/global.scss +142 -142
- package/dist/styles-scss/themes/theme_cfx.scss +32 -32
- package/dist/styles-scss/themes/theme_fivem.scss +32 -32
- package/dist/styles-scss/themes/theme_redm.scss +32 -32
- package/dist/styles-scss/themes/theme_wireframe.scss +32 -32
- package/dist/styles-scss/themes.scss +3 -3
- package/dist/styles-scss/tokens.scss +409 -409
- package/package.json +70 -70
|
@@ -1,142 +1,142 @@
|
|
|
1
|
-
@import "typography";
|
|
2
|
-
@import "tokens";
|
|
3
|
-
|
|
4
|
-
body {
|
|
5
|
-
// initiat tokens
|
|
6
|
-
@include color-tokens;
|
|
7
|
-
@include offset-tokens;
|
|
8
|
-
@include control-height-tokens;
|
|
9
|
-
@include text-tokens;
|
|
10
|
-
@include border-radius-tokens;
|
|
11
|
-
@include switch-tokens;
|
|
12
|
-
@include input-dropzone-tokens;
|
|
13
|
-
@include checkbox-tokens;
|
|
14
|
-
@include input-tokens;
|
|
15
|
-
@include select-tokens;
|
|
16
|
-
@include icon-tokens;
|
|
17
|
-
@include info-panel-tokens;
|
|
18
|
-
@include tabular-tokens;
|
|
19
|
-
@include modal-tokens;
|
|
20
|
-
@include scrollable-tokens;
|
|
21
|
-
@include avatar-tokens;
|
|
22
|
-
@include title-tokens;
|
|
23
|
-
@include button-tokens;
|
|
24
|
-
@include badge-tokens;
|
|
25
|
-
@include accordion-tokens;
|
|
26
|
-
@include mp-tokens;
|
|
27
|
-
@include anchor-tokens;
|
|
28
|
-
|
|
29
|
-
// initiat fonts
|
|
30
|
-
@include font-HelveticaNow;
|
|
31
|
-
|
|
32
|
-
// Set default font styles
|
|
33
|
-
@include ui.font-color('text');
|
|
34
|
-
@include ui.font-family('primary');
|
|
35
|
-
@include ui.font-weight('normal');
|
|
36
|
-
@include ui.line-height('normal');
|
|
37
|
-
@include ui.letter-spacing('normal');
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
a {
|
|
41
|
-
display: inline-flex;
|
|
42
|
-
color: ui.color-token('anchor-color');
|
|
43
|
-
cursor: pointer;
|
|
44
|
-
text-decoration: underline;
|
|
45
|
-
|
|
46
|
-
@include ui.animated();
|
|
47
|
-
|
|
48
|
-
&:not([aria-disabled="true"]) {
|
|
49
|
-
text-decoration-color: currentColor;
|
|
50
|
-
|
|
51
|
-
&:hover {
|
|
52
|
-
text-decoration-color: ui.color-token('anchor-decoration-color-hover');
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
&[aria-disabled="true"] {
|
|
57
|
-
cursor: not-allowed;
|
|
58
|
-
opacity: .5;
|
|
59
|
-
text-decoration: none;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
&[aria-disabled="true"]:active {
|
|
63
|
-
pointer-events: none;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
// Default headers styles
|
|
68
|
-
h1, h2, h3, h4, h5, h6 {
|
|
69
|
-
@include ui.font-family('secondary');
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
h1 {
|
|
73
|
-
@include ui.font-size('xxxlarge');
|
|
74
|
-
@include ui.line-height('xxxlarge');
|
|
75
|
-
@include ui.font-weight('bold');
|
|
76
|
-
}
|
|
77
|
-
h2 {
|
|
78
|
-
@include ui.font-size('xxlarge');
|
|
79
|
-
@include ui.line-height('xxlarge');
|
|
80
|
-
@include ui.font-weight('bold');
|
|
81
|
-
}
|
|
82
|
-
h3 {
|
|
83
|
-
@include ui.font-size('xlarge');
|
|
84
|
-
@include ui.line-height('xlarge');
|
|
85
|
-
@include ui.font-weight('bold');
|
|
86
|
-
}
|
|
87
|
-
h4 {
|
|
88
|
-
@include ui.font-size('large');
|
|
89
|
-
@include ui.line-height('large');
|
|
90
|
-
@include ui.font-weight('bold');
|
|
91
|
-
}
|
|
92
|
-
h5 {
|
|
93
|
-
@include ui.font-size('medium');
|
|
94
|
-
@include ui.line-height('medium');
|
|
95
|
-
@include ui.font-weight('bold');
|
|
96
|
-
}
|
|
97
|
-
h6 {
|
|
98
|
-
@include ui.font-size('medium');
|
|
99
|
-
@include ui.line-height('medium');
|
|
100
|
-
@include ui.font-weight('normal');
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
kbd {
|
|
104
|
-
font-weight: 300;
|
|
105
|
-
padding: 2px ui.q(.5);
|
|
106
|
-
background-color: ui.color-token('kbd-background');
|
|
107
|
-
border-radius: 2px;
|
|
108
|
-
border: solid 1px ui.color-token('kbd-border');
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
p {
|
|
112
|
-
margin: ui.offset('small') 0;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
li::marker {
|
|
116
|
-
color: ui.color-token('li-marker');
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
// Utilities
|
|
120
|
-
.util-full-height {
|
|
121
|
-
height: 100%;
|
|
122
|
-
}
|
|
123
|
-
.util-full-width {
|
|
124
|
-
width: 100%;
|
|
125
|
-
}
|
|
126
|
-
.util-z-index-9000 {
|
|
127
|
-
z-index: ui.zindex('max');
|
|
128
|
-
}
|
|
129
|
-
.util-text-unselectable,
|
|
130
|
-
.util-text-unselectable * {
|
|
131
|
-
user-select: none !important;
|
|
132
|
-
}
|
|
133
|
-
.util-text-selectable,
|
|
134
|
-
.util-text-selectable * {
|
|
135
|
-
user-select: text;
|
|
136
|
-
}
|
|
137
|
-
.util-flex-grow {
|
|
138
|
-
flex-grow: 1;
|
|
139
|
-
}
|
|
140
|
-
.util-flex-no-shrink {
|
|
141
|
-
flex-shrink: 0;
|
|
142
|
-
}
|
|
1
|
+
@import "typography";
|
|
2
|
+
@import "tokens";
|
|
3
|
+
|
|
4
|
+
body {
|
|
5
|
+
// initiat tokens
|
|
6
|
+
@include color-tokens;
|
|
7
|
+
@include offset-tokens;
|
|
8
|
+
@include control-height-tokens;
|
|
9
|
+
@include text-tokens;
|
|
10
|
+
@include border-radius-tokens;
|
|
11
|
+
@include switch-tokens;
|
|
12
|
+
@include input-dropzone-tokens;
|
|
13
|
+
@include checkbox-tokens;
|
|
14
|
+
@include input-tokens;
|
|
15
|
+
@include select-tokens;
|
|
16
|
+
@include icon-tokens;
|
|
17
|
+
@include info-panel-tokens;
|
|
18
|
+
@include tabular-tokens;
|
|
19
|
+
@include modal-tokens;
|
|
20
|
+
@include scrollable-tokens;
|
|
21
|
+
@include avatar-tokens;
|
|
22
|
+
@include title-tokens;
|
|
23
|
+
@include button-tokens;
|
|
24
|
+
@include badge-tokens;
|
|
25
|
+
@include accordion-tokens;
|
|
26
|
+
@include mp-tokens;
|
|
27
|
+
@include anchor-tokens;
|
|
28
|
+
|
|
29
|
+
// initiat fonts
|
|
30
|
+
@include font-HelveticaNow;
|
|
31
|
+
|
|
32
|
+
// Set default font styles
|
|
33
|
+
@include ui.font-color('text');
|
|
34
|
+
@include ui.font-family('primary');
|
|
35
|
+
@include ui.font-weight('normal');
|
|
36
|
+
@include ui.line-height('normal');
|
|
37
|
+
@include ui.letter-spacing('normal');
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
a {
|
|
41
|
+
display: inline-flex;
|
|
42
|
+
color: ui.color-token('anchor-color');
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
text-decoration: underline;
|
|
45
|
+
|
|
46
|
+
@include ui.animated();
|
|
47
|
+
|
|
48
|
+
&:not([aria-disabled="true"]) {
|
|
49
|
+
text-decoration-color: currentColor;
|
|
50
|
+
|
|
51
|
+
&:hover {
|
|
52
|
+
text-decoration-color: ui.color-token('anchor-decoration-color-hover');
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&[aria-disabled="true"] {
|
|
57
|
+
cursor: not-allowed;
|
|
58
|
+
opacity: .5;
|
|
59
|
+
text-decoration: none;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&[aria-disabled="true"]:active {
|
|
63
|
+
pointer-events: none;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// Default headers styles
|
|
68
|
+
h1, h2, h3, h4, h5, h6 {
|
|
69
|
+
@include ui.font-family('secondary');
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
h1 {
|
|
73
|
+
@include ui.font-size('xxxlarge');
|
|
74
|
+
@include ui.line-height('xxxlarge');
|
|
75
|
+
@include ui.font-weight('bold');
|
|
76
|
+
}
|
|
77
|
+
h2 {
|
|
78
|
+
@include ui.font-size('xxlarge');
|
|
79
|
+
@include ui.line-height('xxlarge');
|
|
80
|
+
@include ui.font-weight('bold');
|
|
81
|
+
}
|
|
82
|
+
h3 {
|
|
83
|
+
@include ui.font-size('xlarge');
|
|
84
|
+
@include ui.line-height('xlarge');
|
|
85
|
+
@include ui.font-weight('bold');
|
|
86
|
+
}
|
|
87
|
+
h4 {
|
|
88
|
+
@include ui.font-size('large');
|
|
89
|
+
@include ui.line-height('large');
|
|
90
|
+
@include ui.font-weight('bold');
|
|
91
|
+
}
|
|
92
|
+
h5 {
|
|
93
|
+
@include ui.font-size('medium');
|
|
94
|
+
@include ui.line-height('medium');
|
|
95
|
+
@include ui.font-weight('bold');
|
|
96
|
+
}
|
|
97
|
+
h6 {
|
|
98
|
+
@include ui.font-size('medium');
|
|
99
|
+
@include ui.line-height('medium');
|
|
100
|
+
@include ui.font-weight('normal');
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
kbd {
|
|
104
|
+
font-weight: 300;
|
|
105
|
+
padding: 2px ui.q(.5);
|
|
106
|
+
background-color: ui.color-token('kbd-background');
|
|
107
|
+
border-radius: 2px;
|
|
108
|
+
border: solid 1px ui.color-token('kbd-border');
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
p {
|
|
112
|
+
margin: ui.offset('small') 0;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
li::marker {
|
|
116
|
+
color: ui.color-token('li-marker');
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
// Utilities
|
|
120
|
+
.util-full-height {
|
|
121
|
+
height: 100%;
|
|
122
|
+
}
|
|
123
|
+
.util-full-width {
|
|
124
|
+
width: 100%;
|
|
125
|
+
}
|
|
126
|
+
.util-z-index-9000 {
|
|
127
|
+
z-index: ui.zindex('max');
|
|
128
|
+
}
|
|
129
|
+
.util-text-unselectable,
|
|
130
|
+
.util-text-unselectable * {
|
|
131
|
+
user-select: none !important;
|
|
132
|
+
}
|
|
133
|
+
.util-text-selectable,
|
|
134
|
+
.util-text-selectable * {
|
|
135
|
+
user-select: text;
|
|
136
|
+
}
|
|
137
|
+
.util-flex-grow {
|
|
138
|
+
flex-grow: 1;
|
|
139
|
+
}
|
|
140
|
+
.util-flex-no-shrink {
|
|
141
|
+
flex-shrink: 0;
|
|
142
|
+
}
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
$fg: #fffff0;
|
|
2
|
-
$bg: #161923;
|
|
3
|
-
|
|
4
|
-
$theme-cfx-colors: (
|
|
5
|
-
'accent': #F40552,
|
|
6
|
-
'primary': #F1F1E4,
|
|
7
|
-
'secondary': #9EA4BD,
|
|
8
|
-
'tertiary': #FF75AC,
|
|
9
|
-
'green': #22BF4E,
|
|
10
|
-
'yellow': #FDA640,
|
|
11
|
-
'red': #E33131,
|
|
12
|
-
'argentum': #A3A3A3,
|
|
13
|
-
'aurum': #BFA45E,
|
|
14
|
-
'platinum': #F1F1F1,
|
|
15
|
-
'bg': #11131C,
|
|
16
|
-
'bg-light': #1C202E,
|
|
17
|
-
'bg-dark': #1C202E,
|
|
18
|
-
'bg-dark-grey': #1A1A1A,
|
|
19
|
-
'bg-black': #000000,
|
|
20
|
-
);
|
|
21
|
-
|
|
22
|
-
.cfxui-theme-cfx {
|
|
23
|
-
// TODO: remove
|
|
24
|
-
@include ui.define-main-colors($bg, $fg);
|
|
25
|
-
|
|
26
|
-
@include ui.define-theme($bg, $fg, $theme-cfx-colors);
|
|
27
|
-
|
|
28
|
-
// Invert black indicators for date/time inputs
|
|
29
|
-
::-webkit-calendar-picker-indicator {
|
|
30
|
-
filter: invert(1);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
1
|
+
$fg: #fffff0;
|
|
2
|
+
$bg: #161923;
|
|
3
|
+
|
|
4
|
+
$theme-cfx-colors: (
|
|
5
|
+
'accent': #F40552,
|
|
6
|
+
'primary': #F1F1E4,
|
|
7
|
+
'secondary': #9EA4BD,
|
|
8
|
+
'tertiary': #FF75AC,
|
|
9
|
+
'green': #22BF4E,
|
|
10
|
+
'yellow': #FDA640,
|
|
11
|
+
'red': #E33131,
|
|
12
|
+
'argentum': #A3A3A3,
|
|
13
|
+
'aurum': #BFA45E,
|
|
14
|
+
'platinum': #F1F1F1,
|
|
15
|
+
'bg': #11131C,
|
|
16
|
+
'bg-light': #1C202E,
|
|
17
|
+
'bg-dark': #1C202E,
|
|
18
|
+
'bg-dark-grey': #1A1A1A,
|
|
19
|
+
'bg-black': #000000,
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
.cfxui-theme-cfx {
|
|
23
|
+
// TODO: remove
|
|
24
|
+
@include ui.define-main-colors($bg, $fg);
|
|
25
|
+
|
|
26
|
+
@include ui.define-theme($bg, $fg, $theme-cfx-colors);
|
|
27
|
+
|
|
28
|
+
// Invert black indicators for date/time inputs
|
|
29
|
+
::-webkit-calendar-picker-indicator {
|
|
30
|
+
filter: invert(1);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
$fg: #fffff0;
|
|
2
|
-
$bg: #161923;
|
|
3
|
-
|
|
4
|
-
$theme-fivem-colors: (
|
|
5
|
-
'accent': #5B8F22,
|
|
6
|
-
'primary': #FFFFFF,
|
|
7
|
-
'secondary': #ABABAB,
|
|
8
|
-
'tertiary': #BBE093,
|
|
9
|
-
'green': #22BF4E,
|
|
10
|
-
'yellow': #FDA640,
|
|
11
|
-
'red': #E33131,
|
|
12
|
-
'argentum': #A3A3A3,
|
|
13
|
-
'aurum': #BFA45E,
|
|
14
|
-
'platinum': #F1F1F1,
|
|
15
|
-
'bg': #000000,
|
|
16
|
-
'bg-light': #252525,
|
|
17
|
-
'bg-dark': #131313,
|
|
18
|
-
'bg-dark-grey': #1A1A1A,
|
|
19
|
-
'bg-black': #000000,
|
|
20
|
-
);
|
|
21
|
-
|
|
22
|
-
.cfxui-theme-fivem {
|
|
23
|
-
// TODO: remove
|
|
24
|
-
@include ui.define-main-colors($bg, $fg);
|
|
25
|
-
|
|
26
|
-
@include ui.define-theme($bg, $fg, $theme-fivem-colors);
|
|
27
|
-
|
|
28
|
-
// Invert black indicators for date/time inputs
|
|
29
|
-
::-webkit-calendar-picker-indicator {
|
|
30
|
-
filter: invert(1);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
1
|
+
$fg: #fffff0;
|
|
2
|
+
$bg: #161923;
|
|
3
|
+
|
|
4
|
+
$theme-fivem-colors: (
|
|
5
|
+
'accent': #5B8F22,
|
|
6
|
+
'primary': #FFFFFF,
|
|
7
|
+
'secondary': #ABABAB,
|
|
8
|
+
'tertiary': #BBE093,
|
|
9
|
+
'green': #22BF4E,
|
|
10
|
+
'yellow': #FDA640,
|
|
11
|
+
'red': #E33131,
|
|
12
|
+
'argentum': #A3A3A3,
|
|
13
|
+
'aurum': #BFA45E,
|
|
14
|
+
'platinum': #F1F1F1,
|
|
15
|
+
'bg': #000000,
|
|
16
|
+
'bg-light': #252525,
|
|
17
|
+
'bg-dark': #131313,
|
|
18
|
+
'bg-dark-grey': #1A1A1A,
|
|
19
|
+
'bg-black': #000000,
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
.cfxui-theme-fivem {
|
|
23
|
+
// TODO: remove
|
|
24
|
+
@include ui.define-main-colors($bg, $fg);
|
|
25
|
+
|
|
26
|
+
@include ui.define-theme($bg, $fg, $theme-fivem-colors);
|
|
27
|
+
|
|
28
|
+
// Invert black indicators for date/time inputs
|
|
29
|
+
::-webkit-calendar-picker-indicator {
|
|
30
|
+
filter: invert(1);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
$fg: #fffff0;
|
|
2
|
-
$bg: #161923;
|
|
3
|
-
|
|
4
|
-
$theme-redm-colors: (
|
|
5
|
-
'accent': #D80D0D,
|
|
6
|
-
'primary': #F1F1E4,
|
|
7
|
-
'secondary': #ABABAB,
|
|
8
|
-
'tertiary': #F68888,
|
|
9
|
-
'green': #22BF4E,
|
|
10
|
-
'yellow': #FDA640,
|
|
11
|
-
'red': #E33131,
|
|
12
|
-
'argentum': #A3A3A3,
|
|
13
|
-
'aurum': #BFA45E,
|
|
14
|
-
'platinum': #F1F1F1,
|
|
15
|
-
'bg': #000000,
|
|
16
|
-
'bg-light': #252525,
|
|
17
|
-
'bg-dark': #131313,
|
|
18
|
-
'bg-dark-grey': #1A1A1A,
|
|
19
|
-
'bg-black': #000000,
|
|
20
|
-
);
|
|
21
|
-
|
|
22
|
-
.cfxui-theme-redm {
|
|
23
|
-
// TODO: remove
|
|
24
|
-
@include ui.define-main-colors($bg, $fg);
|
|
25
|
-
|
|
26
|
-
@include ui.define-theme($bg, $fg, $theme-redm-colors);
|
|
27
|
-
|
|
28
|
-
// Invert black indicators for date/time inputs
|
|
29
|
-
::-webkit-calendar-picker-indicator {
|
|
30
|
-
filter: invert(1);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
1
|
+
$fg: #fffff0;
|
|
2
|
+
$bg: #161923;
|
|
3
|
+
|
|
4
|
+
$theme-redm-colors: (
|
|
5
|
+
'accent': #D80D0D,
|
|
6
|
+
'primary': #F1F1E4,
|
|
7
|
+
'secondary': #ABABAB,
|
|
8
|
+
'tertiary': #F68888,
|
|
9
|
+
'green': #22BF4E,
|
|
10
|
+
'yellow': #FDA640,
|
|
11
|
+
'red': #E33131,
|
|
12
|
+
'argentum': #A3A3A3,
|
|
13
|
+
'aurum': #BFA45E,
|
|
14
|
+
'platinum': #F1F1F1,
|
|
15
|
+
'bg': #000000,
|
|
16
|
+
'bg-light': #252525,
|
|
17
|
+
'bg-dark': #131313,
|
|
18
|
+
'bg-dark-grey': #1A1A1A,
|
|
19
|
+
'bg-black': #000000,
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
.cfxui-theme-redm {
|
|
23
|
+
// TODO: remove
|
|
24
|
+
@include ui.define-main-colors($bg, $fg);
|
|
25
|
+
|
|
26
|
+
@include ui.define-theme($bg, $fg, $theme-redm-colors);
|
|
27
|
+
|
|
28
|
+
// Invert black indicators for date/time inputs
|
|
29
|
+
::-webkit-calendar-picker-indicator {
|
|
30
|
+
filter: invert(1);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
$fg: #fffff0;
|
|
2
|
-
$bg: #161923;
|
|
3
|
-
|
|
4
|
-
$theme-wireframe-colors: (
|
|
5
|
-
'accent': #444444,
|
|
6
|
-
'primary': #202123,
|
|
7
|
-
'secondary': #797979,
|
|
8
|
-
'tertiary': #9D9D9D,
|
|
9
|
-
'green': #22BF4E,
|
|
10
|
-
'yellow': #FDA640,
|
|
11
|
-
'red': #E33131,
|
|
12
|
-
'argentum': #A3A3A3,
|
|
13
|
-
'aurum': #BFA45E,
|
|
14
|
-
'platinum': #F1F1F1,
|
|
15
|
-
'bg': #FFFFFF,
|
|
16
|
-
'bg-light': #DADADA,
|
|
17
|
-
'bg-dark': #DADADA,
|
|
18
|
-
'bg-dark-grey': #1A1A1A,
|
|
19
|
-
'bg-black': #444444,
|
|
20
|
-
);
|
|
21
|
-
|
|
22
|
-
.cfxui-theme-wireframe {
|
|
23
|
-
// TODO: remove
|
|
24
|
-
@include ui.define-main-colors($bg, $fg);
|
|
25
|
-
|
|
26
|
-
@include ui.define-theme($bg, $fg, $theme-wireframe-colors);
|
|
27
|
-
|
|
28
|
-
// Invert black indicators for date/time inputs
|
|
29
|
-
::-webkit-calendar-picker-indicator {
|
|
30
|
-
filter: invert(1);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
1
|
+
$fg: #fffff0;
|
|
2
|
+
$bg: #161923;
|
|
3
|
+
|
|
4
|
+
$theme-wireframe-colors: (
|
|
5
|
+
'accent': #444444,
|
|
6
|
+
'primary': #202123,
|
|
7
|
+
'secondary': #797979,
|
|
8
|
+
'tertiary': #9D9D9D,
|
|
9
|
+
'green': #22BF4E,
|
|
10
|
+
'yellow': #FDA640,
|
|
11
|
+
'red': #E33131,
|
|
12
|
+
'argentum': #A3A3A3,
|
|
13
|
+
'aurum': #BFA45E,
|
|
14
|
+
'platinum': #F1F1F1,
|
|
15
|
+
'bg': #FFFFFF,
|
|
16
|
+
'bg-light': #DADADA,
|
|
17
|
+
'bg-dark': #DADADA,
|
|
18
|
+
'bg-dark-grey': #1A1A1A,
|
|
19
|
+
'bg-black': #444444,
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
.cfxui-theme-wireframe {
|
|
23
|
+
// TODO: remove
|
|
24
|
+
@include ui.define-main-colors($bg, $fg);
|
|
25
|
+
|
|
26
|
+
@include ui.define-theme($bg, $fg, $theme-wireframe-colors);
|
|
27
|
+
|
|
28
|
+
// Invert black indicators for date/time inputs
|
|
29
|
+
::-webkit-calendar-picker-indicator {
|
|
30
|
+
filter: invert(1);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import "./themes/theme_cfx.scss";
|
|
2
|
-
@import "./themes/theme_fivem.scss";
|
|
3
|
-
@import "./themes/theme_redm.scss";
|
|
1
|
+
@import "./themes/theme_cfx.scss";
|
|
2
|
+
@import "./themes/theme_fivem.scss";
|
|
3
|
+
@import "./themes/theme_redm.scss";
|
|
4
4
|
@import "./themes/theme_wireframe.scss";
|