beyond-rails 1.0.3 → 1.0.7

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 +167 -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 +303 -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 +313 -0
  52. metadata +6 -2
data/src/sass/components/_month-menu.scss CHANGED
@@ -1,10 +1,10 @@
1
1
  .month-menu {
2
+ background: $date-menu-bg;
2
3
  display: none;
3
4
  position: absolute;
4
5
  box-shadow: 0 0 0 1px rgba(136, 152, 170, .1),
5
6
  0 15px 35px 0 rgba(49, 49, 93, .1),
6
7
  0 5px 15px 0 rgba(0, 0, 0, .08);
7
- background-color: #fff;
8
8
  white-space: nowrap;
9
9
  &.static {
10
10
  display: inline-block;
@@ -17,10 +17,10 @@
17
17
  width: 252px;
18
18
  }
19
19
  .month-menu-caption {
20
+ color: $date-menu-caption-color;
20
21
  display: flex;
21
22
  justify-content: space-between;
22
23
  font-size: 15px;
23
- color: #3c4257;
24
24
  text-align: center;
25
25
  height: 50px;
26
26
  line-height: 50px;
@@ -46,28 +46,28 @@
46
46
  td {
47
47
  text-align: center;
48
48
  &.cell {
49
- background-color: #f7fafc;
49
+ background: $date-menu-cell-bg;
50
+ border-color: $date-menu-cell-border;
50
51
  cursor: pointer;
51
52
  border-width: 1px;
52
53
  border-style: solid;
53
- border-color: #e3e8ee;
54
54
  }
55
55
  &.cell.today {
56
- background-color: #fffef4;
56
+ background: $date-menu-cell-today-bg;
57
57
  }
58
58
  &.cell.selected {
59
- background-color: #6c8eef;
60
- color: #fff;
61
- border-color: #6c8eef;
59
+ background: $date-menu-cell-selected-bg;
60
+ border-color: $date-menu-cell-selected-border;
61
+ color: $txt;
62
62
  }
63
63
  &.cell.js-disabled {
64
64
  opacity: .4;
65
65
  cursor: not-allowed;
66
66
  }
67
67
  &.cell.selected-ex {
68
- background-color: #5469d4;
69
- color: #fff;
70
- border-color: #5469d4;
68
+ background: $date-menu-cell-selected-ex-bg;
69
+ border-color: $date-menu-cell-selected-ex-border;
70
+ color: $txt;
71
71
  }
72
72
  }
73
73
  }
data/src/sass/components/_nav.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  user-select: none;
8
8
  cursor: pointer;
9
9
  padding: 7px;
10
- color: #1a1f36;
10
+ color: $nav-color-ex;
11
11
  font-size: 1.1rem;
12
12
  display: flex;
13
13
  align-items: center;
@@ -33,7 +33,7 @@
33
33
  }
34
34
  .nav-item {
35
35
  font-weight: 400;
36
- color: #1a1f36;
36
+ color: $nav-color;
37
37
  text-decoration: none;
38
38
  display: flex;
39
39
  align-items: center;
@@ -45,13 +45,13 @@
45
45
  }
46
46
  .nav-item:active,
47
47
  .nav-item.active {
48
- color: $color-primary;
48
+ color: $nav-color-active;
49
49
  }
50
50
  }
51
51
  .nav-tabs .nav-item.show .nav-link,
52
52
  .nav-tabs .nav-link.active {
53
- color: #495057;
54
- background-color: #fff;
53
+ color: $nav-link-color;
54
+ background-color: $nav-link-bg;
55
55
  border-color: #dee2e6 #dee2e6 #fff;
56
56
  }
57
57
  .nav-link.disabled {
data/src/sass/components/_navbar.scss CHANGED
@@ -1,13 +1,6 @@
1
1
  .navbar {
2
- $bg-nav: rgb(227, 232, 238);
3
- $color-nav-primary: rgb(60, 66, 87);
4
- $color-nav-primary-ex: #101425;
5
- $color-nav: rgb(105, 115, 150);
6
- $color-nav-ex: #adb5d0;
7
- $color-nav-disabled: #adb5d0;
8
-
9
2
  display: flex;
10
- background-color: $bg-nav;
3
+ background-color: $navbar-bg;
11
4
  font-size: 12px;
12
5
  padding: 8px 14px 8px 8px;
13
6
  @media (max-width: $screen-md) {
@@ -17,11 +10,11 @@
17
10
  }
18
11
  }
19
12
  &, a {
20
- color: $color-nav;
13
+ color: $nav-txt;
21
14
  }
22
15
  .navbar-brand {
23
16
  display: inline-block;
24
- color: $color-nav-primary;
17
+ color: $nav-txt-primary;
25
18
  font-size: 16px;
26
19
  padding: 4px 14px;
27
20
  }
@@ -40,16 +33,16 @@
40
33
  .nav-item.js-active,
41
34
  .nav-item:hover {
42
35
  .nav-link {
43
- color: $color-nav-primary-ex;
36
+ color: $nav-txt-primary-ex;
44
37
  }
45
38
  }
46
39
  .nav-link {
47
40
  padding: 7px 14px;
48
41
  &.disabled {
49
- color: $color-nav-disabled;
42
+ color: $nav-txt-disabled;
50
43
  cursor: not-allowed;
51
44
  &:hover {
52
- color: $color-nav-ex;
45
+ color: $nav-txt-disabled;
53
46
  }
54
47
  }
55
48
  }
@@ -100,7 +93,7 @@
100
93
  &:before,
101
94
  &:after {
102
95
  transition: .3s all;
103
- background-color: $color-nav-primary;
96
+ background-color: $nav-txt-primary;
104
97
  display: block;
105
98
  position: absolute;
106
99
  width: 24px;
@@ -139,15 +132,15 @@
139
132
  }
140
133
 
141
134
  &.navbar-type1 {
142
- $bg-nav-type1: #1a1f36;
143
- $color-nav-primary-type1: #fff;
144
- $color-nav-type1: #6c8eef;
145
- $color-nav-ex-type1: #b9d2ff;
146
- $color-nav-disabled-type1: #9193ce;
135
+ $navbar-bg-type1: #1a1f36;
136
+ $nav-txt-primary-type1: #fff;
137
+ $nav-txt-type1: #6c8eef;
138
+ $nav-txt-ex-type1: #b9d2ff;
139
+ $nav-txt-disabled-type1: #9193ce;
147
140
 
148
- background: $bg-nav-type1;
141
+ background: $navbar-bg-type1;
149
142
  &, & a {
150
- color: $color-nav-type1;
143
+ color: $nav-txt-type1;
151
144
  }
152
145
  .navbar-brand {
153
146
  color: #fff;
@@ -155,17 +148,17 @@
155
148
  .nav-item.js-active,
156
149
  .nav-item:hover {
157
150
  .nav-link {
158
- color: $color-nav-ex-type1;
151
+ color: $nav-txt-ex-type1;
159
152
  }
160
153
  }
161
154
  .nav-link.disabled,
162
155
  .nav-link.disabled:hover {
163
- color: $color-nav-disabled-type1;
156
+ color: $nav-txt-disabled-type1;
164
157
  }
165
158
  .navbar-toggler-icon,
166
159
  .navbar-toggler-icon:before,
167
160
  .navbar-toggler-icon:after {
168
- background-color: $color-nav-primary-type1;
161
+ background-color: $nav-txt-primary-type1;
169
162
  }
170
163
  .search-input {
171
164
  box-shadow: none;
@@ -173,10 +166,10 @@
173
166
  }
174
167
 
175
168
  &.navbar-type2 {
176
- $color-nav-primary-type2: #fff;
177
- $color-nav-type2: #e3e0e8;
178
- $color-nav-ex-type2: #fff;
179
- $color-nav-disabled-type2: #b5b6dc;
169
+ $nav-txt-primary-type2: #fff;
170
+ $nav-txt-type2: #e3e0e8;
171
+ $nav-txt-ex-type2: #fff;
172
+ $nav-txt-disabled-type2: #b5b6dc;
180
173
 
181
174
  background: rgb(84,73,255);
182
175
  background: linear-gradient(125deg,
@@ -184,25 +177,25 @@
184
177
  rgba(29,205,255,1) 80%,
185
178
  rgba(166,255,203,1) 100%);
186
179
  &, & a {
187
- color: $color-nav-type2;
180
+ color: $nav-txt-type2;
188
181
  }
189
182
  .navbar-brand {
190
- color: $color-nav-primary-type2;
183
+ color: $nav-txt-primary-type2;
191
184
  }
192
185
  .nav-item.js-active,
193
186
  .nav-item:hover {
194
187
  .nav-link {
195
- color: $color-nav-ex-type2;
188
+ color: $nav-txt-ex-type2;
196
189
  }
197
190
  }
198
191
  .nav-link.disabled,
199
192
  .nav-link.disabled:hover {
200
- color: $color-nav-disabled-type2;
193
+ color: $nav-txt-disabled-type2;
201
194
  }
202
195
  .navbar-toggler-icon,
203
196
  .navbar-toggler-icon:before,
204
197
  .navbar-toggler-icon:after {
205
- background-color: $color-nav-primary-type2;
198
+ background-color: $nav-txt-primary-type2;
206
199
  }
207
200
  .search-input {
208
201
  box-shadow: none;
data/src/sass/components/_pagination.scss CHANGED
@@ -1,20 +1,21 @@
1
- $page-active-color: #3c4258;
2
-
3
1
  %page-link {
2
+ color: $page-color;
4
3
  border-radius: 3px;
5
4
  transition: .3s all;
6
5
  margin: 0 7px;
7
- color: #1a1f36;
8
6
  display: block;
9
7
  cursor: pointer;
10
8
  padding: .5rem .75rem;
11
9
  &:disabled {
12
10
  cursor: not-allowed;
13
11
  }
14
- &.js-active,
12
+ &.js-active {
13
+ background: $page-active-bg;
14
+ color: $page-active-color;
15
+ }
15
16
  &:hover {
16
- background-color: $page-active-color;
17
- color: #fff;
17
+ background: $page-hover-bg;
18
+ color: $page-hover-color;
18
19
  }
19
20
  }
20
21
 
@@ -35,8 +36,8 @@ $page-active-color: #3c4258;
35
36
  }
36
37
  }
37
38
  .input-group-append > .input-group-text {
38
- background-color: $page-active-color;
39
- color: #fff;
39
+ background: $page-active-bg;
40
+ color: $page-active-color;
40
41
  height: 100%;
41
42
  }
42
43
  @media (max-width: $screen-sm) {
data/src/sass/components/_radio.scss CHANGED
@@ -14,7 +14,6 @@ label.radio {
14
14
  margin-bottom: initial;
15
15
  }
16
16
  .radio {
17
- transform: translateY(3px);
18
17
  &.focus {
19
18
  @include focus-outline;
20
19
  }
@@ -22,7 +21,7 @@ label.radio {
22
21
  $size: 14px;
23
22
  @include size($size);
24
23
  cursor: pointer;
25
- transform: translateY(2px);
24
+ transform: translateY(4px);
26
25
  position: relative;
27
26
  display: inline-block;
28
27
  input[type="radio"] {
@@ -45,8 +44,7 @@ label.radio {
45
44
  &:before {
46
45
  content: ''
47
46
  }
48
-
49
- transform: translateY(-1px);
47
+ transform: translateY(-2px);
50
48
  background-color: #fff;
51
49
  border: 0;
52
50
  border-radius: 50%;
data/src/sass/components/_search-dropdown.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  padding: 14px;
7
7
  }
8
8
  .search-dropdown-input.input {
9
+ background: $search-dropdown-input-bg;
9
10
  width: 100%;
10
11
  &.loading {
11
12
  padding-right: 40px;
@@ -30,9 +31,9 @@
30
31
  }
31
32
  .search-dropdown-menu-item {
32
33
  display: flex;
33
- border: 3px solid transparent;
34
+ border: 1px solid transparent;
34
35
  &.selected {
35
- border: 3px solid $bg-outline;
36
+ border-color: $bg-outline;
36
37
  }
37
38
  cursor: pointer;
38
39
  font-size: 13px;
data/src/sass/components/_select.scss CHANGED
@@ -1,19 +1,19 @@
1
1
  .select {
2
+ color: $select-color;
3
+ background: $control-bg;
4
+ box-shadow: $select-shadow;
5
+ font-size: 14px;
6
+ appearance: none;
7
+ border: 0;
8
+ padding: 6px 34px 6px 10px;
9
+ background-image: url(beyond-image-path('#{$beyond-css-img-path}arrow-select.svg'));
10
+
2
11
  &:disabled {
3
12
  opacity: .5;
4
13
  }
5
14
  &::-ms-expand {
6
15
  display: none;
7
16
  }
8
- font-size: 14px;
9
- color: #3c4257;
10
- appearance: none;
11
- border: 0;
12
- background: #fff;
13
- box-shadow: 0 2px 5px 0 rgba(60, 66, 87, .12);
14
- padding: 6px 34px 6px 10px;
15
-
16
- background-image: url(beyond-image-path('#{$beyond-css-img-path}arrow-select.svg'));
17
17
  &.active {
18
18
  background-image: url(beyond-image-path('#{$beyond-css-img-path}arrow-select-ex.svg'));
19
19
  }
@@ -28,27 +28,19 @@
28
28
  }
29
29
 
30
30
  .select.select-outline {
31
- box-shadow: 0 0 0 1px rgba(60, 66, 87, .16);
31
+ box-shadow: $select-outline-shadow;
32
32
  &:focus {
33
33
  outline: 0;
34
- box-shadow: 0 0 0 1px rgba(60, 66, 87, .16),
35
- 0 0 0 1px rgba(60, 66, 87, .16),
36
- 0 1px 1px 0 rgba(0, 0, 0, .12),
37
- 0 0 0 4px rgba(58, 151, 212, .28);
34
+ box-shadow: $select-outline-shadow,
35
+ $focus-outline;
38
36
  }
39
37
  }
40
38
 
41
39
  .select.select-outline-strong {
42
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12),
43
- rgba(60, 66, 87, .16) 0 0 0 1px,
44
- rgba(60, 66, 87, .12) 0 2px 5px 0;
40
+ box-shadow: $select-outline-strong-shadow;
45
41
  &:focus {
46
42
  outline: 0;
47
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12),
48
- rgba(60, 66, 87, .16) 0 0 0 1px,
49
- rgba(60, 66, 87, .12) 0 2px 5px 0,
50
- 0 0 0 1px rgba(60, 66, 87, .16),
51
- 0 1px 1px 0 rgba(0, 0, 0, .12),
52
- 0 0 0 4px rgba(58, 151, 212, .28);
43
+ box-shadow: $select-outline-strong-shadow,
44
+ $focus-outline;
53
45
  }
54
46
  }
data/src/sass/components/_sidebar.scss CHANGED
@@ -5,11 +5,11 @@
5
5
  padding-top: 10px;
6
6
  padding-bottom: 40px;
7
7
  @media (max-width: $screen-md) {
8
+ background: $sidebar-bg;
8
9
  padding-left: 10px;
9
10
  width: 240px;
10
11
  z-index: 20;
11
12
  transition: .2s all;
12
- background-color: #fff;
13
13
  margin: 0;
14
14
  position: fixed;
15
15
  left: 0;
data/src/sass/components/_spinner.scss CHANGED
@@ -44,7 +44,6 @@
44
44
  content: '';
45
45
  }
46
46
  .loader:after {
47
- background-color: #f7f8f9;
48
47
  @include size(75%);
49
48
  border-radius: 50%;
50
49
  content: '';
data/src/sass/components/_switch.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  .form-switch {
2
- color: #3c4257;
2
+ color: $txt;
3
3
  cursor: pointer;
4
4
  margin-bottom: 1rem;
5
5
  font-size: 14px;
@@ -19,9 +19,9 @@
19
19
  width: 38px;
20
20
  height: 20px;
21
21
  &:checked + .switch {
22
- background-color: #cfd1e2;
22
+ background-color: $switch-bg-ex;
23
23
  &:after {
24
- background-color: #60659d;
24
+ background-color: $switch-knob-bg-ex;
25
25
  right: -1px;
26
26
  left: initial;
27
27
  }
@@ -37,14 +37,14 @@
37
37
  height: 20px;
38
38
  position: relative;
39
39
  display: inline-block;
40
- background-color: #e2e2e2;
40
+ background-color: $switch-bg;
41
41
  border-radius: 20px;
42
42
  &:after {
43
43
  transition: .3s all;
44
44
  position: absolute;
45
45
  content: '';
46
46
  display: block;
47
- background-color: #a3a3a3;
47
+ background-color: $switch-knob-bg;
48
48
  @include size(25px);
49
49
  left: -1px;
50
50
  top: -2px;
data/src/sass/components/_tabbox.scss CHANGED
@@ -1,20 +1,16 @@
1
1
  @mixin tab-active-text {
2
- color: #1d2638;
2
+ color: $tab-active-color;
3
3
  font-weight: 700;
4
4
  }
5
- @mixin tab-active-border {
6
- border-bottom-color: #3c4356;
7
- }
8
5
  @mixin tab-focus-style {
9
-
10
6
  &.js-current,
11
7
  &:focus.js-current {
12
8
  @include tab-active-text;
13
- @include tab-active-border;
9
+ border-bottom-color: $tab-active-border;
14
10
  }
15
-
16
11
  &:focus {
17
- @include tab-active-text;
12
+ color: $tab-focus-color;
13
+ font-weight: 700;
18
14
  border-bottom-color: rgba(58, 151, 212, .8);
19
15
  }
20
16
  }
@@ -30,7 +26,7 @@
30
26
  }
31
27
  .js-slider {
32
28
  position: absolute;
33
- background-color: #858585;
29
+ background-color: $tab-slider-default-bg;
34
30
  height: 2px;
35
31
  transition: all .3s;
36
32
  }
@@ -43,16 +39,7 @@
43
39
  padding: 18px 50px;
44
40
  }
45
41
  .tab-btn {
46
- .icon-chevron-down {
47
- margin-left: 7px;
48
- font-size: 10px;
49
- }
50
- &:hover {
51
- .icon-chevron-down:before {
52
- color: #1d2638;
53
- }
54
- }
55
- background: #fff;
42
+ background: $tab-btn-bg;
56
43
  padding: 12px 25px;
57
44
  font-size: 13px;
58
45
  border-top: 0;
@@ -60,22 +47,23 @@
60
47
  border-left: 0;
61
48
  border-bottom-width: 2px;
62
49
  border-bottom-style: solid;
63
- border-bottom-color: #e3e8ee;
50
+ border-bottom-color: $tab-btn-border;
64
51
  outline: 0;
65
52
  transition: all .3s;
53
+
54
+ .icon-chevron-down {
55
+ margin-left: 7px;
56
+ font-size: 10px;
57
+ }
66
58
  &:hover {
67
- @include tab-active-text;
59
+ color: $tab-hover-color;
60
+ font-weight: 700;
61
+ .icon-chevron-down:before {
62
+ color: #1d2638;
63
+ }
68
64
  }
69
65
  @include tab-focus-style;
70
66
 
71
- $tab-btn-borders: (
72
- (tab-btn-type0, rgba(109, 188, 128, .3)),
73
- (tab-btn-type1, rgba(1, 137, 114, .2)),
74
- (tab-btn-type2, rgba(0, 91, 74, .2)),
75
- (tab-btn-type3, rgba(93, 105, 227, .3)),
76
- (tab-btn-type4, rgba(205, 205, 205, 1)),
77
- );
78
-
79
67
  @each $classname, $border in $tab-btn-borders {
80
68
  &.#{$classname} {
81
69
  border-bottom-color: $border;
@@ -85,12 +73,11 @@
85
73
  }
86
74
  }
87
75
  .tabbox.tabbox-uno {
88
- $tab-active-color: #6772e5;
89
76
  .js-slider {
90
- background-color: $tab-active-color;
77
+ background-color: $tab-uno-active-color;
91
78
  }
92
79
  .tab-btn.js-current {
93
- color: $tab-active-color;
80
+ color: $tab-uno-active-color;
94
81
  font-weight: 700;
95
82
  }
96
83
  }
data/src/sass/components/_table.scss CHANGED
@@ -7,9 +7,9 @@
7
7
 
8
8
  %disabled-td {
9
9
  cursor: not-allowed;
10
- background-color: #ddd;
11
- color: #333;
12
- box-shadow: inset 0 -1px #c7c7c7;
10
+ background: $table-td-disabled-bg;
11
+ color: $table-td-disabled-color;
12
+ box-shadow: $table-td-disabled-shadow;
13
13
  }
14
14
 
15
15
  .table {
@@ -22,15 +22,14 @@
22
22
  text-align: left;
23
23
 
24
24
  thead {
25
- background-color: #f7fafc;
26
25
  color: #1a1f36;
27
26
  }
28
27
  th {
29
- color: #697386;
28
+ color: $table-th-color;
30
29
  white-space: nowrap;
31
30
  }
32
31
  td {
33
- color: #3c4257;
32
+ color: $table-td-color;
34
33
  }
35
34
  .title {
36
35
  font-size: 16px;
@@ -44,20 +43,20 @@
44
43
  }
45
44
  .link {
46
45
  &:hover {
47
- border-bottom: 1px solid $color-anchor-ex;
46
+ border-bottom: 1px solid $txt-anchor-ex;
48
47
  }
49
48
  }
50
- @for $i from 1 through length($color-txt-types) {
51
- td.txt-type#{$i},
52
- th.txt-type#{$i} {
53
- color: nth($color-txt-types, $i);
49
+ @for $i from 1 through length($txt-types) {
50
+ td.txt-type#{$i - 1},
51
+ th.txt-type#{$i - 1} {
52
+ color: nth($txt-types, $i);
54
53
  }
55
54
  }
56
55
  th,
57
56
  td {
58
- background-color: #fff;
57
+ background: $table-bg;
58
+ box-shadow: $table-border;
59
59
  padding: 7px;
60
- box-shadow: inset 0 -1px #e3e8ee;
61
60
  }
62
61
  tr.disabled {
63
62
  > td {
@@ -72,7 +71,7 @@
72
71
  }
73
72
  &.striped {
74
73
  tr:nth-child(odd) td {
75
- background-color: #f7fafc;
74
+ background: $table-bg-ex;
76
75
  }
77
76
  tr.disabled:nth-child(odd) td {
78
77
  @extend %disabled-td;
data/src/sass/components/_tag-input.scss CHANGED
@@ -1,22 +1,20 @@
1
1
  .tag-input {
2
+ background: $control-bg;
2
3
  cursor: text;
3
- background-color: #fff;
4
4
  padding: .4em .4em 0 .4em;
5
5
  min-height: 40px;
6
-
7
6
  .tag-suggest-input {
8
7
  color: rgba(60, 66, 87, .41);
9
8
  }
10
-
11
9
  .tag-main-input {
12
10
  position: absolute;
13
11
  background-color: transparent;
14
12
  }
15
-
16
13
  .tag-input-box {
17
14
  display: inline-block;
18
15
  position: relative;
19
16
  > input {
17
+ background: $control-bg;
20
18
  border: 0;
21
19
  &:focus {
22
20
  outline: none;
data/src/sass/components/_tag.scss CHANGED
@@ -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
  }
data/src/sass/components/_time-menu.scss CHANGED
@@ -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;