beyond-rails 1.0.3 → 1.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/src/js/components/BarChart.js +19 -7
  3. data/src/js/components/LineChart.js +18 -8
  4. data/src/js/components/PieChart.js +16 -6
  5. data/src/js/components/SearchDropdown.js +8 -5
  6. data/src/js/consts/index.js +42 -0
  7. data/src/js/decorators/chartCommon.js +4 -1
  8. data/src/js/index.js +0 -1
  9. data/src/sass/_base.scss +170 -0
  10. data/src/sass/_beyond-dark.scss +3 -0
  11. data/src/sass/_beyond.scss +0 -54
  12. data/src/sass/_main.scss +56 -176
  13. data/src/sass/abstracts/_mixins.scss +2 -4
  14. data/src/sass/abstracts/_placeholders.scss +3 -3
  15. data/src/sass/abstracts/_post-variables.scss +85 -0
  16. data/src/sass/abstracts/_variables.scss +301 -188
  17. data/src/sass/base/_background.scss +2 -3
  18. data/src/sass/base/_typography.scss +17 -17
  19. data/src/sass/components/_alert.scss +8 -14
  20. data/src/sass/components/_autocomplete.scss +4 -5
  21. data/src/sass/components/_badge.scss +2 -4
  22. data/src/sass/components/_breadcrumb.scss +3 -2
  23. data/src/sass/components/_btn-group.scss +1 -1
  24. data/src/sass/components/_btn.scss +34 -19
  25. data/src/sass/components/_card.scss +12 -6
  26. data/src/sass/components/_chart.scss +5 -5
  27. data/src/sass/components/_checkbox.scss +8 -8
  28. data/src/sass/components/_date-menu.scss +10 -10
  29. data/src/sass/components/_date-time-ranger.scss +9 -3
  30. data/src/sass/components/_dropdown.scss +11 -14
  31. data/src/sass/components/_form.scss +17 -18
  32. data/src/sass/components/_input.scss +4 -4
  33. data/src/sass/components/_modal.scss +5 -6
  34. data/src/sass/components/_month-menu.scss +11 -11
  35. data/src/sass/components/_nav.scss +5 -5
  36. data/src/sass/components/_navbar.scss +26 -33
  37. data/src/sass/components/_pagination.scss +9 -8
  38. data/src/sass/components/_radio.scss +2 -4
  39. data/src/sass/components/_search-dropdown.scss +3 -2
  40. data/src/sass/components/_select.scss +15 -23
  41. data/src/sass/components/_sidebar.scss +1 -1
  42. data/src/sass/components/_spinner.scss +0 -1
  43. data/src/sass/components/_switch.scss +5 -5
  44. data/src/sass/components/_tabbox.scss +19 -32
  45. data/src/sass/components/_table.scss +13 -14
  46. data/src/sass/components/_tag-input.scss +2 -4
  47. data/src/sass/components/_tag.scss +4 -4
  48. data/src/sass/components/_time-menu.scss +4 -4
  49. data/src/sass/components/_toast.scss +4 -3
  50. data/src/sass/components/_tooltip.scss +11 -14
  51. data/src/sass/themes/_dark.scss +309 -0
  52. metadata +6 -2
data/src/sass/_main.scss CHANGED
@@ -1,176 +1,56 @@
1
- html {
2
- height: 100%;
3
- }
4
- body {
5
- box-sizing: border-box;
6
- font-family: 'Noto Sans CJK TC', 'PingFang TC', 'Microsoft JhengHei',
7
- 'Helvetica Neue', Helvetica, Verdana, 'Open Sans', sans-serif;
8
- font-size: 16px;
9
-
10
- .content {
11
- flex: 1;
12
- }
13
- &.with-footer {
14
- min-height: 100%;
15
- display: flex;
16
- flex-direction: column;
17
- }
18
- }
19
- *,
20
- *:before,
21
- *:after {
22
- box-sizing: inherit;
23
- }
24
-
25
- :focus {
26
- outline: 3px solid $bg-outline;
27
- outline-offset: 2px;
28
- }
29
-
30
- // for ie11
31
- body:focus {
32
- outline: 0;
33
- }
34
-
35
- h1, h2, h3, h4, h5, h6 {
36
- margin-top: 0;
37
- margin-bottom: 8px;
38
- }
39
-
40
- ul {
41
- list-style-type: none;
42
- padding: 0;
43
- margin: 0;
44
- }
45
-
46
- p {
47
- line-height: 2.1em;
48
- margin-top: 0;
49
- margin-bottom: 1rem;
50
- }
51
- small {
52
- font-size: 70%;
53
- }
54
- blockquote {
55
- margin: 0 0 1rem;
56
- }
57
-
58
- th, td {
59
- padding: 7px;
60
- }
61
-
62
- hr {
63
- margin-top: 0.8rem;
64
- margin-bottom: 0.8rem;
65
- border: 0;
66
- border-top: 1px solid rgba(0, 0, 0, .1);
67
- }
68
-
69
- a {
70
- cursor: pointer;
71
- color: $color-anchor;
72
- text-decoration: none;
73
- &:hover {
74
- color: $color-anchor-ex;
75
- }
76
- }
77
-
78
- // active style
79
- $color-active: #5469d4;
80
-
81
- .select,
82
- .select.select-outline,
83
- .select.select-outline-strong,
84
- .btn.btn-dropdown,
85
- .search-input,
86
- .input {
87
- &.active {
88
- color: $color-active;
89
- box-shadow: 0 1px 1px 0 rgba(54, 59, 255, .6),
90
- rgba(14, 48, 173, .3) 0 0 0 1px,
91
- rgba(14, 26, 62, .12) 0 2px 5px 0;
92
- }
93
- }
94
- .search-input.active .input,
95
- .search-input.active .icon-search:before {
96
- color: $color-active;
97
- }
98
-
99
- .input,
100
- .select,
101
- .select.select-outline,
102
- .select.select-outline-strong {
103
- &:focus.active {
104
- color: $color-active;
105
- box-shadow: 0 1px 1px 0 rgba(54, 59, 255, .6),
106
- rgba(14, 48, 173, .3) 0 0 0 1px,
107
- rgba(14, 26, 62, .12) 0 2px 5px 0,
108
- 0 0 0 4px rgba(58, 151, 212, .28);
109
- }
110
- }
111
- .search-input.active.outline {
112
- color: $color-active;
113
- box-shadow: 0 1px 1px 0 rgba(54, 59, 255, .6),
114
- rgba(14, 48, 173, .3) 0 0 0 1px,
115
- rgba(14, 26, 62, .12) 0 2px 5px 0,
116
- 0 0 0 4px rgba(58, 151, 212, .28);
117
- }
118
-
119
- .scrollable {
120
- overflow-y: scroll;
121
- -webkit-overflow-scrolling: touch;
122
- }
123
-
124
- .align-left {
125
- text-align: left !important;
126
- }
127
- .align-right {
128
- text-align: right !important;
129
- }
130
- .align-center {
131
- text-align: center !important;
132
- }
133
-
134
- .float-left {
135
- float: left !important;
136
- }
137
- .float-right {
138
- float: right !important;
139
- }
140
- .float-none {
141
- float: none !important;
142
- }
143
-
144
- .sr-only {
145
- position: absolute;
146
- width: 1px;
147
- height: 1px;
148
- padding: 0;
149
- overflow: hidden;
150
- clip: rect(0, 0, 0, 0);
151
- white-space: nowrap;
152
- clip-path: inset(50%);
153
- border: 0;
154
- }
155
-
156
- .full-width {
157
- width: 100% !important;
158
- }
159
-
160
- hr {
161
- margin-top: 20px;
162
- margin-bottom: 20px;
163
- border-top: 1px solid #e3e8ee;
164
- border-left: 0;
165
- border-right: 0;
166
- border-bottom: 0;
167
- }
168
-
169
- input[type=file], /* FF, IE7+, chrome (except button) */
170
- input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
171
- cursor: pointer;
172
- }
173
-
174
- .nowrap {
175
- white-space: nowrap !important;
176
- }
1
+ @import './abstracts/_post-variables';
2
+ @import './abstracts/_placeholders';
3
+ @import './abstracts/_mixins';
4
+ @import './vendor/_normalize';
5
+ @import './vendor/_turbolink';
6
+ @import './base/_background';
7
+ @import './base/_typography';
8
+ @import './_animations';
9
+ @import './_base';
10
+ @import './layout/_border-util';
11
+ @import './layout/_col';
12
+ @import './layout/_container';
13
+ @import './layout/_offset-util';
14
+ @import './layout/_sizing-util';
15
+ @import './layout/_spacing-util';
16
+ @import './layout/_visibility-util';
17
+ @import './layout/_flex-util';
18
+ @import './components/_alert';
19
+ @import './components/_autocomplete';
20
+ @import './components/_avatar';
21
+ @import './components/_badge';
22
+ @import './components/_breadcrumb';
23
+ @import './components/_btn';
24
+ @import './components/_btn-group';
25
+ @import './components/_card';
26
+ @import './components/_checkbox';
27
+ @import './components/_date-input';
28
+ @import './components/_date-menu';
29
+ @import './components/_month-menu';
30
+ @import './components/_date-time-ranger';
31
+ @import './components/_datepicker';
32
+ @import './components/_dropdown';
33
+ @import './components/_form';
34
+ @import './components/_icon';
35
+ @import './components/_input';
36
+ @import './components/_list';
37
+ @import './components/_modal';
38
+ @import './components/_nav';
39
+ @import './components/_navbar';
40
+ @import './components/_pagination';
41
+ @import './components/_radio';
42
+ @import './components/_search-dropdown';
43
+ @import './components/_select';
44
+ @import './components/_sidebar';
45
+ @import './components/_spinner';
46
+ @import './components/_tabbox';
47
+ @import './components/_table';
48
+ @import './components/_tag';
49
+ @import './components/_tag-input';
50
+ @import './components/_time-input';
51
+ @import './components/_time-menu';
52
+ @import './components/_toast';
53
+ @import './components/_tooltip';
54
+ @import './components/_switch';
55
+ @import './components/_mega-menu';
56
+ @import './components/_chart';
@@ -24,9 +24,7 @@
24
24
 
25
25
  @mixin focus-outline {
26
26
  outline: 0;
27
- box-shadow: 0 0 0 1px rgba(60, 66, 87, .16),
28
- 0 1px 1px 0 rgba(0, 0, 0, .12),
29
- 0 0 0 4px rgba(58, 151, 212, .28);
27
+ box-shadow: $focus-outline;
30
28
  }
31
29
 
32
30
  @mixin ripple($size, $left, $top) {
@@ -41,7 +39,7 @@
41
39
  display: block;
42
40
  z-index: -1;
43
41
  @include size($size);
44
- background-color: #e6e9ea;
42
+ background-color: $ripple-bg;
45
43
  opacity: 0;
46
44
  transform: scale(.6);
47
45
  }
@@ -1,5 +1,5 @@
1
1
  %checkbox-disabled {
2
- background-color: #eee;
2
+ background-color: $checkbox-disabled-bg;
3
3
  cursor: not-allowed;
4
4
  input[type="checkbox"] {
5
5
  cursor: not-allowed;
@@ -13,7 +13,7 @@
13
13
  }
14
14
 
15
15
  %radio-disabled {
16
- background-color: #eee;
16
+ background-color: $radio-disabled-bg;
17
17
  cursor: not-allowed;
18
18
  input[type="radio"] {
19
19
  cursor: not-allowed;
@@ -39,5 +39,5 @@
39
39
  width: 250px;
40
40
  font-size: 14px;
41
41
  line-height: 1.5;
42
- color: #495057;
42
+ color: $control-color;
43
43
  }
@@ -0,0 +1,85 @@
1
+ $bgs:
2
+ ('bg-transparent', $bg-transparent),
3
+ ('bg-admin', $bg-admin),
4
+ ('bg-outline', $bg-outline),
5
+ ('bg-content', $bg-content),
6
+ ('bg-primary', $bg-primary),
7
+ ('bg-primary-ex', $bg-primary-ex),
8
+ ('bg-primary-ex2', $bg-primary-ex2),
9
+ ('bg-secondary', $bg-secondary),
10
+ ('bg-secondary-ex', $bg-secondary-ex),
11
+ ('bg-secondary-ex2', $bg-secondary-ex2),
12
+ ('bg-success', $bg-success),
13
+ ('bg-success-ex', $bg-success-ex),
14
+ ('bg-success-ex2', $bg-success-ex2),
15
+ ('bg-danger', $bg-danger),
16
+ ('bg-danger-ex', $bg-danger-ex),
17
+ ('bg-danger-ex2', $bg-danger-ex2),
18
+ ('bg-warn', $bg-warn),
19
+ ('bg-warning', $bg-warn),
20
+ ('bg-warn-ex', $bg-warn-ex),
21
+ ('bg-warn-ex2', $bg-warn-ex2),
22
+ ('bg-info', $bg-info),
23
+ ('bg-info-ex', $bg-info-ex),
24
+ ('bg-info-ex2', $bg-info-ex2),
25
+ ('bg-white', $bg-white),
26
+ ('bg-type1', $bg-type1),
27
+ ('bg-type1-ex', $bg-type1-ex),
28
+ ('bg-type1-ex2', $bg-type1-ex2),
29
+ ('bg-type2', $bg-type2),
30
+ ('bg-type2-ex', $bg-type2-ex),
31
+ ('bg-type2-ex2', $bg-type2-ex2),
32
+ ('bg-light', $bg-light),
33
+ ('bg-light-ex', $bg-light-ex),
34
+ ('bg-light-ex2', $bg-light-ex2),
35
+ ('bg-dark', $bg-dark),
36
+ ('bg-dark-ex', $bg-dark-ex),
37
+ ('bg-dark-ex2', $bg-dark-ex2),
38
+ ('bg-icon', $bg-icon),
39
+ ('bg-disabled', $bg-disabled);
40
+
41
+ $borders:
42
+ ('border-primary', $border-primary),
43
+ ('border-secondary', $border-secondary),
44
+ ('border-success', $border-success),
45
+ ('border-danger', $border-danger),
46
+ ('border-warning', $border-warning),
47
+ ('border-info', $border-info),
48
+ ('border-light', $border-light),
49
+ ('border-dark', $border-dark),
50
+ ('border-white', $border-white);
51
+
52
+ $txt-types:
53
+ $txt-type0,
54
+ $txt-type1,
55
+ $txt-type2,
56
+ $txt-type3,
57
+ $txt-type4;
58
+
59
+ $tags: (
60
+ ('tag-primary', $bg-tag-primary),
61
+ ('tag-secondary', $bg-tag-secondary),
62
+ ('tag-success', $bg-tag-success),
63
+ ('tag-danger', $bg-tag-danger),
64
+ ('tag-warn', $bg-tag-warn),
65
+ ('tag-info', $bg-tag-info),
66
+ ('tag-dark', $bg-tag-dark),
67
+ ('tag-light', $bg-tag-light),
68
+ ('tag-type0', $bg-tag-type0),
69
+ ('tag-type1', $bg-tag-type1),
70
+ ('tag-type2', $bg-tag-type2),
71
+ ('tag-type3', $bg-tag-type3),
72
+ ('tag-type4', $bg-tag-type4)
73
+ );
74
+
75
+ $alerts:
76
+ $alert-primary,
77
+ $alert-secondary,
78
+ $alert-warn,
79
+ $alert-danger;
80
+
81
+ $btns:
82
+ $btn-primary,
83
+ $btn-secondary,
84
+ $btn-danger,
85
+ $btn-warn;