beyond-rails 0.0.295 → 1.0.4

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