beyond-rails 1.0.1 → 1.0.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/src/js/components/BarChart.js +19 -7
  3. data/src/js/components/Dropdown.js +9 -2
  4. data/src/js/components/LineChart.js +18 -8
  5. data/src/js/components/PieChart.js +16 -6
  6. data/src/js/components/SearchDropdown.js +10 -5
  7. data/src/js/consts/index.js +42 -0
  8. data/src/js/decorators/chartCommon.js +4 -1
  9. data/src/js/index.js +0 -1
  10. data/src/sass/_base.scss +170 -0
  11. data/src/sass/_beyond-dark.scss +3 -0
  12. data/src/sass/_beyond.scss +0 -54
  13. data/src/sass/_main.scss +56 -176
  14. data/src/sass/abstracts/_mixins.scss +2 -4
  15. data/src/sass/abstracts/_placeholders.scss +3 -3
  16. data/src/sass/abstracts/_post-variables.scss +85 -0
  17. data/src/sass/abstracts/_variables.scss +301 -188
  18. data/src/sass/base/_background.scss +2 -3
  19. data/src/sass/base/_typography.scss +17 -17
  20. data/src/sass/components/_alert.scss +8 -14
  21. data/src/sass/components/_autocomplete.scss +4 -5
  22. data/src/sass/components/_badge.scss +2 -4
  23. data/src/sass/components/_breadcrumb.scss +3 -2
  24. data/src/sass/components/_btn-group.scss +1 -1
  25. data/src/sass/components/_btn.scss +34 -19
  26. data/src/sass/components/_card.scss +12 -6
  27. data/src/sass/components/_chart.scss +5 -5
  28. data/src/sass/components/_checkbox.scss +8 -8
  29. data/src/sass/components/_date-menu.scss +10 -10
  30. data/src/sass/components/_date-time-ranger.scss +9 -3
  31. data/src/sass/components/_dropdown.scss +11 -14
  32. data/src/sass/components/_form.scss +17 -18
  33. data/src/sass/components/_input.scss +4 -4
  34. data/src/sass/components/_modal.scss +5 -6
  35. data/src/sass/components/_month-menu.scss +11 -11
  36. data/src/sass/components/_nav.scss +5 -5
  37. data/src/sass/components/_navbar.scss +26 -33
  38. data/src/sass/components/_pagination.scss +9 -8
  39. data/src/sass/components/_radio.scss +2 -4
  40. data/src/sass/components/_search-dropdown.scss +3 -2
  41. data/src/sass/components/_select.scss +15 -23
  42. data/src/sass/components/_sidebar.scss +1 -1
  43. data/src/sass/components/_spinner.scss +0 -1
  44. data/src/sass/components/_switch.scss +5 -5
  45. data/src/sass/components/_tabbox.scss +19 -32
  46. data/src/sass/components/_table.scss +13 -14
  47. data/src/sass/components/_tag-input.scss +2 -4
  48. data/src/sass/components/_tag.scss +4 -4
  49. data/src/sass/components/_time-menu.scss +4 -4
  50. data/src/sass/components/_toast.scss +4 -3
  51. data/src/sass/components/_tooltip.scss +11 -14
  52. data/src/sass/themes/_dark.scss +311 -0
  53. metadata +6 -2
@@ -22,13 +22,14 @@
22
22
  }
23
23
  }
24
24
  .toast-item {
25
+ background: $toast-bg;
26
+ box-shadow: $toast-shadow;
27
+ color: $toast-txt;
25
28
  line-height: 1;
26
29
  display: inline-block;
27
30
  border-radius: 2px;
28
31
  margin: 7px auto;
29
32
  padding: 8px 12px;
30
- background-color: #3c4257;
31
- color: #fff;
32
33
  white-space: nowrap;
33
34
  }
34
35
  .toast-message {
@@ -48,6 +49,6 @@
48
49
  border-bottom: 0;
49
50
  border-left: 1px solid #a3acb9;
50
51
  background-color: transparent;
51
- color: #7dabf8;
52
+ color: $toast-btn-txt;
52
53
  }
53
54
  }
@@ -1,5 +1,5 @@
1
1
  .tooltip {
2
- $border-color: #e8e8e8;
2
+ background: $tooltip-bg;
3
3
  max-width: 400px;
4
4
  border-radius: 4px;
5
5
  display: none;
@@ -7,11 +7,8 @@
7
7
  position: absolute;
8
8
  padding: 10px 13px;
9
9
  line-height: 1.9;
10
- color: #3c4257;
11
- background-color: #fff;
12
- box-shadow: 4px 4px 15px 1px rgba(68, 68, 72, .12);
10
+ box-shadow: $tooltip-shadow;
13
11
  border: 0;
14
- box-shadow: 0 1px 2px 0 #ccc;
15
12
 
16
13
  &:after {
17
14
  content: ' ';
@@ -19,7 +16,7 @@
19
16
  border: 0;
20
17
  border-top-left-radius: 1px;
21
18
  @include size(8px);
22
- background-color: #fff;
19
+ background: $tooltip-bg;
23
20
  position: absolute;
24
21
  transform: rotate(45deg);
25
22
  }
@@ -29,8 +26,8 @@
29
26
  right: 0;
30
27
  margin-left: auto;
31
28
  margin-right: auto;
32
- border-right: 1px solid $border-color;
33
- border-bottom: 1px solid $border-color;
29
+ border-right: 1px solid $tooltip-border;
30
+ border-bottom: 1px solid $tooltip-border;
34
31
  }
35
32
  &.bottom:after {
36
33
  top: -4px;
@@ -38,8 +35,8 @@
38
35
  right: 0;
39
36
  margin-left: auto;
40
37
  margin-right: auto;
41
- border-left: 1px solid $border-color;
42
- border-top: 1px solid $border-color;
38
+ border-left: 1px solid $tooltip-border;
39
+ border-top: 1px solid $tooltip-border;
43
40
  }
44
41
  &.left:after {
45
42
  right: -4px;
@@ -47,8 +44,8 @@
47
44
  bottom: 0;
48
45
  margin-top: auto;
49
46
  margin-bottom: auto;
50
- border-right: 1px solid $border-color;
51
- border-top: 1px solid $border-color;
47
+ border-right: 1px solid $tooltip-border;
48
+ border-top: 1px solid $tooltip-border;
52
49
  }
53
50
  &.right:after {
54
51
  left: -4px;
@@ -56,7 +53,7 @@
56
53
  bottom: 0;
57
54
  margin-top: auto;
58
55
  margin-bottom: auto;
59
- border-left: 1px solid $border-color;
60
- border-bottom: 1px solid $border-color;
56
+ border-left: 1px solid $tooltip-border;
57
+ border-bottom: 1px solid $tooltip-border;
61
58
  }
62
59
  }
@@ -0,0 +1,311 @@
1
+ $txt: #ddd;
2
+ $txt-strong: #fff;
3
+ $txt-light: rgba(221, 221, 221, .8);
4
+
5
+ $txt-primary: #769aff;
6
+ $txt-secondary: #aaa;
7
+ $txt-success: #85d996;
8
+ $txt-warn: #f39401;
9
+ $txt-danger: #ff4e99;
10
+ $txt-muted: $txt-light;
11
+
12
+ $txt-anchor: $txt-primary;
13
+ $txt-anchor-ex: lighten($txt-anchor, 10%);
14
+
15
+ $txt-type0: #b8bee1;
16
+ $txt-type1: #80bfb2;
17
+ $txt-type2: #909aff;
18
+ $txt-type3: #74bdff;
19
+ $txt-type4: #97bde5;
20
+
21
+ $bg-admin: #070b1f;
22
+
23
+ $bg-primary: #3b5dbd;
24
+ $bg-secondary: #fff;
25
+ $bg-warn: #f39401;
26
+ $bg-danger: #ff4e99;
27
+
28
+ $bg-content: #1f2332;
29
+ $bg-content-shadow: none;
30
+
31
+ // nav
32
+ $nav-color: $txt;
33
+ $nav-color-ex: $txt-strong;
34
+ $nav-color-active: $txt-primary;
35
+
36
+ // navbar
37
+ $navbar-bg: #070b1f;
38
+ $nav-txt-primary: $txt-strong;
39
+ $nav-txt-primary-ex: $txt-primary;
40
+ $nav-txt: $txt;
41
+ $nav-txt-ex: $txt-strong;
42
+ $nav-txt-disabled: #959595;
43
+
44
+ // select
45
+ $select-color: $txt;
46
+ $select-bg: #282d47;
47
+
48
+ // table
49
+ $table-bg: #070b1f;
50
+ $table-bg-ex: #191c2e;
51
+ $table-border: inset 0 -1px #181928;
52
+ $table-th-color: $txt-light;
53
+ $table-td-color: $txt;
54
+ $table-td-disabled-bg: #686868;
55
+ $table-td-disabled-color: #333;
56
+ $table-td-disabled-shadow: inset 0 -1px #333;
57
+
58
+ // form
59
+ $control-bg: #2b2f40;
60
+ $control-color: #fff;
61
+ $control-disabled-bg: #2b2f40;
62
+ $control-disabled-color: #888;
63
+
64
+ $form-check-disabled-color: #888;
65
+
66
+ // tag
67
+ $bg-tag-primary: $bg-primary;
68
+ $bg-tag-secondary: #9a7bf7;
69
+ $bg-tag-success: $bg-success;
70
+ $bg-tag-danger: $txt-danger;
71
+ $bg-tag-warn: $txt-warn;
72
+ $bg-tag-info: $bg-info;
73
+ $bg-tag-light: #fff;
74
+ $bg-tag-dark: #aaa;
75
+ $bg-tag-type1: #159f84;
76
+ $bg-tag-type2: #b37082;
77
+ $bg-tag-type3: #e15dd8;
78
+
79
+ $color-tag-danger-ex: #fff;
80
+ $bg-tag-danger-ex: $txt-danger;
81
+
82
+
83
+ // alerts
84
+ $alert-primary: (
85
+ state: 'primary',
86
+ bg: transparent,
87
+ border: $txt-primary,
88
+ txt: $txt-primary,
89
+ link-txt: $txt-primary,
90
+ hr-txt: $txt-primary
91
+ );
92
+
93
+ $alert-secondary: (
94
+ state: 'secondary',
95
+ bg: transparent,
96
+ border: #76ffcb,
97
+ txt: #76ffcb,
98
+ link-txt: #76ffcb,
99
+ hr-txt: #76ffcb
100
+ );
101
+
102
+ $alert-warn: (
103
+ state: 'warn',
104
+ bg: transparent,
105
+ border: $txt-warn,
106
+ txt: $txt-warn,
107
+ link-txt: $txt-warn,
108
+ hr-txt: $txt-warn
109
+ );
110
+
111
+ $alert-danger: (
112
+ state: 'danger',
113
+ bg: transparent,
114
+ border: $txt-danger,
115
+ txt: $txt-danger,
116
+ link-txt: $txt-danger,
117
+ hr-txt: $txt-danger
118
+ );
119
+
120
+ // buttons
121
+ $default-btn-bg: #373b4a;
122
+ $badge-bg: #181c2f;
123
+ $btn-badge-bg: darken($default-btn-bg, 10%);
124
+ $btn-badge-shadow: 0 0 4px 0 rgba(255, 255, 255, .1);
125
+
126
+ $btn-primary: (
127
+ classname: 'btn-primary',
128
+ bg: $bg-primary,
129
+ txt: #fff,
130
+ bg-ex: lighten(#3b5dbd, 10%),
131
+ bg-disabled: #697baf,
132
+ badge-bg: #243e87,
133
+ badge-txt: #fff
134
+ );
135
+
136
+ $btn-secondary: (
137
+ classname: 'btn-secondary',
138
+ bg: #333956,
139
+ txt: #8facff,
140
+ bg-ex: lighten(#333956, 10%),
141
+ bg-disabled: #474954,
142
+ badge-bg: #181c2f,
143
+ badge-txt: $txt-primary
144
+ );
145
+
146
+ $btn-warn: (
147
+ classname: 'btn-warn',
148
+ bg: #b36000,
149
+ txt: #fff,
150
+ bg-ex: lighten(#b36000, 10%),
151
+ bg-disabled: #7e5e39,
152
+ badge-bg: #834809,
153
+ badge-txt: #fff
154
+ );
155
+
156
+ $btn-danger: (
157
+ classname: 'btn-danger',
158
+ bg: #cd3d64,
159
+ txt: #fff,
160
+ bg-ex: #ef6a8e,
161
+ bg-disabled: #743b4a,
162
+ badge-bg: #8d203d,
163
+ badge-txt: #fff
164
+ );
165
+
166
+ $btn-border: #262b45;
167
+ $btn-link-border: $txt-primary;
168
+
169
+ // color, color-ex, color-disabled
170
+ $btn-link: $txt-primary, lighten($txt-primary, 10%), #aaa;
171
+
172
+ $ripple-bg: #000;
173
+
174
+ // badges
175
+ // classname, bg, color
176
+ $badges:
177
+ ('badge-primary', #3b5dbd, $txt),
178
+ ('badge-secondary', #333956, $txt-primary),
179
+ ('badge-success', #1a343a, $txt),
180
+ ('badge-danger', #581927, $txt),
181
+ ('badge-warn', #b36000, $txt),
182
+ ('badge-info', #1e5d72, $txt),
183
+ ('badge-type1', #8b438d, $txt),
184
+ ('badge-type2', #fdd85f, #3c4c68),
185
+ ('badge-dark', #000, $txt),
186
+ ('badge-light', #f8f9fa, #555);
187
+
188
+ // breadcrumb
189
+ $breadcrumb-color: $txt;
190
+ $breadcrumb-color-ex: $txt-primary;
191
+
192
+ // card
193
+ $card-bg: #282d47;
194
+ $card-color: $txt;
195
+ $list-group-bg: #282d47;
196
+ $card-border: rgba(255, 255, 255, .2);
197
+
198
+ $blockquote-footer-color: $txt-light;
199
+
200
+ $nav-link-bg: #333956;
201
+ $nav-link-color: $txt;
202
+
203
+ $bg-outline: rgba(255, 255, 255, .8);
204
+ $focus-outline: 0 0 0 1px rgba(255, 255, 255, .8);
205
+
206
+ // select
207
+ $select-shadow:
208
+ 0 2px 5px 0 rgba(255, 255, 255, .12);
209
+ $select-outline-shadow:
210
+ 0 0 0 1px rgba(255, 255, 255, .16);
211
+ $select-outline-strong-shadow:
212
+ 0 1px 1px 0 rgba(255, 255, 255, .12),
213
+ 0 0 0 1px rgba(255, 255, 255, .16),
214
+ 0 2px 5px 0 rgba(255, 255, 255, .12);
215
+
216
+ // dropdown
217
+ $dropdown-menu-bg: #2b2e3c;
218
+ $dropdown-menu-bg-ex: lighten(#2b2e3c, 10%);
219
+ $dropdown-menu-color: $txt;
220
+ $dropdown-menu-shadow: 0 0 0 1px rgba(0, 0, 0, .1),
221
+ 0 15px 35px 0 rgba(0, 0, 0, .1),
222
+ 0 5px 15px 0 rgba(0, 0, 0, .08);
223
+
224
+ $dropdown-divider-border: rgba(255, 255, 255, .2);
225
+ $dropdown-menu-title-bg: #232532;
226
+
227
+ $checkbox-bg: $control-bg;
228
+ $checkbox-bg-ex: #6772e5;
229
+ $checkbox-disabled-bg: #858585;
230
+ $radio-disabled-bg: #858585;
231
+
232
+ $switch-bg: #3b3f4c;
233
+ $switch-bg-ex: rgba(103, 114, 229, .3);
234
+ $switch-knob-bg: #a3a3a3;
235
+ $switch-knob-bg-ex: #6772e5;
236
+
237
+ $date-menu-bg: #2b2e3c;
238
+ $date-menu-cell-bg: lighten($date-menu-bg, 5%);
239
+ $date-menu-cell-border: $date-menu-cell-bg;
240
+ $date-menu-cell-today-bg: #28557c;
241
+ $date-menu-cell-selected-bg: #516bb7;
242
+ $date-menu-cell-selected-border: #516bb7;
243
+ $date-menu-cell-selected-ex-bg: #3f4f9b;
244
+ $date-menu-cell-selected-ex-border: #3f4f9b;
245
+
246
+ $date-menu-caption-color: $txt-strong;
247
+ $date-menu-week-header-color: #9da8b9;
248
+
249
+ $time-menu-bg: #2b2e3c;
250
+ $time-menu-bg-hover: darken($time-menu-bg, 7%);
251
+ $time-menu-bg-active: darken($time-menu-bg-hover, 7%);
252
+
253
+ // pagination
254
+ $page-color: $txt;
255
+ $page-active-bg: #3c4258;
256
+ $page-active-color: #fff;
257
+ $page-hover-bg: darken($page-active-bg, 7%);
258
+ $page-hover-color: #fff;
259
+
260
+ $search-dropdown-input-bg: #1b1e2a;
261
+
262
+ // modal
263
+ $modal-bg: #2b2f40;
264
+ $modal-header-color: $txt-strong;
265
+ $modal-color: $txt;
266
+ $modal-shadow: 0 7px 14px 0 rgba(0, 0, 0, .12),
267
+ 0 3px 6px 0 rgba(0, 0, 0, .12);
268
+
269
+ $hr-border: rgba(255, 255, 255, .2);
270
+
271
+ // tabbox
272
+ $tab-btn-bg: transparent;
273
+ $tab-btn-border: rgba(255, 255, 255, .3);
274
+ $tab-active-color: $txt-strong;
275
+ $tab-active-border: $txt-strong;
276
+ $tab-hover-color: $txt-strong;
277
+ $tab-focus-color: $txt-strong;
278
+
279
+ $tab-btn-borders: (
280
+ (tab-btn-type0, rgba(109, 188, 128, .3)),
281
+ (tab-btn-type1, rgba(108, 255, 230, .26)),
282
+ (tab-btn-type2, rgba(0, 151, 122, .44)),
283
+ (tab-btn-type3, rgba(142, 151, 243, .4)),
284
+ (tab-btn-type4, rgba(205, 205, 205, 1)),
285
+ );
286
+ $tab-slider-default-bg: $txt-strong;
287
+
288
+ // tabbox uno
289
+ $tab-uno-active-color: $txt-primary;
290
+
291
+ $tooltip-bg: #2b2e3c;
292
+ $tooltip-border: rgba(0, 0, 0, .5);
293
+ $tooltip-shadow: 0 1px 2px 0 $tooltip-border;
294
+
295
+ $autocomplete-item-bg: #2b2e3c;
296
+ $autocomplete-item-bg-ex: darken($autocomplete-item-bg, 10%);
297
+
298
+ $page-prefix-txt: $txt-primary;
299
+ $page-title-txt: $txt-strong;
300
+
301
+ $chart-menu-bg: #2b2e3c;
302
+ $chart-menu-txt: $txt;
303
+ $chart-menu-border: 1px solid $chart-menu-bg;
304
+ $chart-menu-shadow: 4px 4px 15px 1px rgba(0, 0, 0, .12);
305
+
306
+ $sidebar-bg: #1d1f28;
307
+
308
+ $toast-bg: lighten(#2b2e3c, 10%);
309
+ $toast-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
310
+ $toast-txt: #fff;
311
+ $toast-btn-txt: $txt-primary;
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: beyond-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.1
4
+ version: 1.0.5
5
5
  platform: ruby
6
6
  authors:
7
7
  - kmsheng
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2021-08-10 00:00:00.000000000 Z
12
+ date: 2021-12-28 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: sassc
@@ -210,11 +210,14 @@ files:
210
210
  - src/js/utils/raf.js
211
211
  - src/js/utils/unbindAll.js
212
212
  - src/sass/_animations.scss
213
+ - src/sass/_base.scss
214
+ - src/sass/_beyond-dark.scss
213
215
  - src/sass/_beyond-sprockets.scss
214
216
  - src/sass/_beyond.scss
215
217
  - src/sass/_main.scss
216
218
  - src/sass/abstracts/_mixins.scss
217
219
  - src/sass/abstracts/_placeholders.scss
220
+ - src/sass/abstracts/_post-variables.scss
218
221
  - src/sass/abstracts/_variables.scss
219
222
  - src/sass/base/_background.scss
220
223
  - src/sass/base/_typography.scss
@@ -268,6 +271,7 @@ files:
268
271
  - src/sass/layout/_sizing-util.scss
269
272
  - src/sass/layout/_spacing-util.scss
270
273
  - src/sass/layout/_visibility-util.scss
274
+ - src/sass/themes/_dark.scss
271
275
  - src/sass/vendor/_normalize.scss
272
276
  - src/sass/vendor/_turbolink.scss
273
277
  homepage: https://superlanding.github.io/beyond/