UNPKG

phoenix-components-library

Version:

Component library for Phoenix Frontend Projects.

129 lines (114 loc) • 3.31 kB
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
//============================================================== // OUR COLOR PALLETE //============================================================== @white: #fff; @green1: #f0f7ed; @green2: #e9f4e3; @green3: #e1f0da; @green4: #d3e9c8; @green5: #c4e2b6; @green6: #b6dba4; @green7: #a7d391; @green8: #99cc7f; @green9: #8ac56d; @green10: #7bbe5b; @green11: #6db749; @green12: #61a441; @green13: #57923a; @lightGreen1: #f9faee; @lightGreen2: #f6f7e6; @lightGreen3: #f3f5dd; @lightGreen4: #edf0cd; @lightGreen5: #e7ebbc; @lightGreen6: #e2e7ab; @lightGreen7: #dce29a; @lightGreen8: #d6dd8a; @lightGreen9: #d0d879; @lightGreen10: #cad369; @lightGreen11: #c5cf58; @lightGreen12: #b0b94f; @lightGreen13: #9da546; @black1: #f8f8f8; @black2: #f3f4f4; @black3: #e9ebeb; @black4: #dee0e0; @black5: #d3d6d6; @black6: #bec2c2; @black7: #a8adae; @black8: #93999a; @black9: #7d8485; @black10: #687071; @black11: #525b5d; @black12: #3d4749; @black13: #273335; @orange1: #fef7ee; @orange2: #fdf2e5; @orange3: #fdeedd; @orange4: #fce6cc; @orange5: #fbdebb; @orange6: #fad6aa; @orange7: #f9ce99; @orange8: #f8c688; @orange9: #f7be77; @orange10: #f6b666; @orange11: #f6ae55; @orange12: #dc9c4c; @orange13: #c48b44; @red1: #fdf0ee; @red2: #fde8e5; @red3: #fce0dd; @red4: #fbd1cc; @red5: #fac2bb; @red6: #f9b3aa; @red7: #f8a399; @red8: #f79489; @red9: #f68577; @red10: #f57667; @red11: #f46756; @red12: #db5c4d; @red13: #c35244; //============================================================== // ANT DESIGN VARIABLES //============================================================== // The prefix to use on all css classes from ant. @ant-prefix : ant; // -------- Colors ----------- @primary-color : @green11; @info-color : @green10; @success-color : @green10; @processing-color : @green5; @error-color : @red11; @highlight-color : @red-6; @warning-color : @orange10; @normal-color : @black6; // Color used by default to control hover and active backgrounds and for // alert info backgrounds. @primary-1: @green11; // replace tint(@primary-color, 90%) @primary-2: @green10; // replace tint(@primary-color, 80%) @primary-3: @green9; // unused @primary-4: @green8; // unused @primary-5: @green7; // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%) @primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color @primary-7: @green6; // replace shade(@primary-color, 5%) // @primary-8: color(~`colorPalette("@{primary-color}", 8) `); // unused // @primary-9: color(~`colorPalette("@{primary-color}", 9) `); // unused // @primary-10: color(~`colorPalette("@{primary-color}", 10) `); // unused // Base Scaffolding Variables // --- // Background color for `<body>` @body-background : @white; // Base background color for most components @component-background : @white; @font-family : 'ClearSans', 'BrandonLight', sans-serif; @text-color : @black11; @font-size-base : 13px; // The background colors for active and hover states for things like // list items or table cells. @item-active-bg : @primary-1; @item-hover-bg : @black3; //@primary-1; // LINK @link-color : @primary-color; @link-hover-color : @green5; @link-active-color : @green6; // Border color @border-color-base : @black6; // base border outline a component