active_frontend 11.1.0 → 12.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/lib/active_frontend/version.rb +1 -1
  3. data/lib/generators/active_frontend/templates/install.scss +1 -12
  4. data/vendor/assets/javascripts/_animation.js +90 -32
  5. data/vendor/assets/javascripts/_chart.js +4 -4
  6. data/vendor/assets/javascripts/_file_input.js +3 -3
  7. data/vendor/assets/javascripts/_typeahead.js +0 -2
  8. data/vendor/assets/stylesheets/_ad.scss +5 -0
  9. data/vendor/assets/stylesheets/_alert.scss +12 -9
  10. data/vendor/assets/stylesheets/_animation.scss +217 -213
  11. data/vendor/assets/stylesheets/_breadcrumb.scss +29 -19
  12. data/vendor/assets/stylesheets/_button.scss +33 -58
  13. data/vendor/assets/stylesheets/_carousel.scss +14 -21
  14. data/vendor/assets/stylesheets/_chart.scss +5 -1
  15. data/vendor/assets/stylesheets/_color.scss +5 -5
  16. data/vendor/assets/stylesheets/_colorpicker.scss +0 -1
  17. data/vendor/assets/stylesheets/_datepicker.scss +11 -10
  18. data/vendor/assets/stylesheets/_dropdown.scss +50 -24
  19. data/vendor/assets/stylesheets/_footer.scss +11 -18
  20. data/vendor/assets/stylesheets/_form.scss +193 -208
  21. data/vendor/assets/stylesheets/_grid.scss +36 -23
  22. data/vendor/assets/stylesheets/_header.scss +27 -60
  23. data/vendor/assets/stylesheets/_icon.scss +5 -5
  24. data/vendor/assets/stylesheets/_image.scss +6 -2
  25. data/vendor/assets/stylesheets/_label_and_badge.scss +6 -1
  26. data/vendor/assets/stylesheets/_link.scss +1 -0
  27. data/vendor/assets/stylesheets/_list.scss +36 -43
  28. data/vendor/assets/stylesheets/_loader.scss +8 -2
  29. data/vendor/assets/stylesheets/_map.scss +4 -0
  30. data/vendor/assets/stylesheets/_missive.scss +4 -8
  31. data/vendor/assets/stylesheets/_mixin.scss +5 -0
  32. data/vendor/assets/stylesheets/_modal.scss +90 -40
  33. data/vendor/assets/stylesheets/_nav_and_tab.scss +40 -65
  34. data/vendor/assets/stylesheets/_navbar.scss +2 -1
  35. data/vendor/assets/stylesheets/_pagination.scss +8 -10
  36. data/vendor/assets/stylesheets/_panel.scss +23 -25
  37. data/vendor/assets/stylesheets/_placeholder.scss +13 -12
  38. data/vendor/assets/stylesheets/_progress.scss +3 -4
  39. data/vendor/assets/stylesheets/_reset.scss +1 -0
  40. data/vendor/assets/stylesheets/_sidebar.scss +30 -13
  41. data/vendor/assets/stylesheets/_slider.scss +2 -2
  42. data/vendor/assets/stylesheets/_spinner.scss +348 -236
  43. data/vendor/assets/stylesheets/_swoggle.scss +2 -2
  44. data/vendor/assets/stylesheets/_table.scss +137 -127
  45. data/vendor/assets/stylesheets/_timepicker.scss +8 -5
  46. data/vendor/assets/stylesheets/_toolbar.scss +10 -22
  47. data/vendor/assets/stylesheets/_tooltip.scss +21 -7
  48. data/vendor/assets/stylesheets/_trunk.scss +19 -36
  49. data/vendor/assets/stylesheets/_typography.scss +80 -82
  50. data/vendor/assets/stylesheets/_variable.scss +15 -0
  51. data/vendor/assets/stylesheets/active_frontend.scss +1 -12
  52. metadata +4 -4
  53. data/vendor/assets/stylesheets/_aside.scss +0 -127
@@ -43,8 +43,8 @@ $onwhite-colors: (
43
43
  z-index: -1;
44
44
  }
45
45
  .swoggle {
46
- background: $color-light-haze;
47
- border: 1px solid $color-light-haze;
46
+ background: $color-haze;
47
+ border: 1px solid $color-haze;
48
48
  border-radius: 500px;
49
49
  color: $color-gray;
50
50
  cursor: pointer;
@@ -1,167 +1,178 @@
1
1
  /* Table of Contents
2
2
  ==================================================
3
+ # Variables
3
4
  # Table
4
- # Sizes
5
5
  # Styles
6
+ # Sizes
6
7
  # Colors
7
8
  # Media Queries */
8
9
 
10
+ /* # Variables
11
+ ================================================== */
12
+ $alignments: bottom, middle, top;
13
+
9
14
  /* # Table
10
15
  ================================================== */
11
16
  table {
12
- background: $color-white;
17
+ background: $color-transparent;
13
18
  border-collapse: collapse;
14
19
  border-spacing: 0;
15
20
  max-width: 100%;
16
21
  }
17
- .table { width: 100%; }
22
+ .table {
23
+ border-color: $color-haze !important;
24
+ width: 100%;
25
+ }
18
26
  .table caption,
19
- .table th,
20
- .table td {
21
- border-top: 1px solid $color-haze;
22
- color: $color-black;
23
- font-size: 16px;
24
- line-height: 25px;
25
- padding: 9px 10px 6px 10px;
27
+ .table thead tr th,
28
+ .table tbody tr td,
29
+ .table tfoot tr td {
30
+ padding: 9px 10px 7px 10px;
26
31
  text-align: left;
27
32
  vertical-align: middle;
28
33
  }
29
- .table th,
30
- .table tfoot td {
31
- border-top-width: 1px;
34
+ .table caption,
35
+ .table thead tr th,
36
+ .table tfoot tr td { font-weight: bold; }
37
+ .table caption,
38
+ .table tbody tr td {
39
+ font-size: 16px;
40
+ line-height: 25px;
41
+ }
42
+ .table caption {
43
+ border-bottom: 1px solid;
44
+ border-color: inherit;
45
+ letter-spacing: 1px;
46
+ text-transform: uppercase;
47
+ }
48
+ .table thead tr th,
49
+ .table tbody tr td,
50
+ .table tfoot tr td {
51
+ border-top: 1px solid;
52
+ border-color: inherit;
53
+ }
54
+ .table thead tr th,
55
+ .table tfoot tr td {
32
56
  font-size: 14px;
33
- font-weight: bold;
57
+ line-height: 22px;
34
58
  }
35
- .table th a { color: $color-black; }
36
- .table th.tablespy-sort-asc:before,
37
- .table th.tablespy-sort-desc:before,
38
- .table th.tablespy-sort-none:before {
59
+ .table tbody tr td { padding-bottom: 6px; }
60
+ .table thead tr th.tablespy-sort-asc:before,
61
+ .table thead tr th.tablespy-sort-desc:before,
62
+ .table thead tr th.tablespy-sort-none:before {
39
63
  float: right;
40
64
  font-family: "Ionicons";
41
65
  font-style: normal;
42
66
  font-weight: normal;
43
67
  }
44
- .table th.tablespy-sort-asc:before { content: "\f3d8"; }
45
- .table th.tablespy-sort-desc:before { content: "\f3d0"; }
46
- .table th.tablespy-sort-none:before { content: "\f462"; }
47
- .table th.tablespy-sort-asc,
48
- .table th.tablespy-sort-desc,
49
- .table th.tablespy-sort-none { cursor: pointer; }
50
- .table th.tablespy-sort-empty:before { content: ""; }
51
- .table th.tablespy-sort-empty { pointer-events: none; }
52
- .table caption {
53
- border-bottom: 1px solid $color-haze;
54
- border-top: 0;
55
- color: $color-black;
56
- font-size: 15px;
57
- font-weight: bold;
58
- letter-spacing: 1;
59
- padding: 9px 10px 8px 10px;
60
- text-transform: uppercase;
61
- }
68
+ .table thead tr th.tablespy-sort-asc:before { content: "\f3d8"; }
69
+ .table thead tr th.tablespy-sort-desc:before { content: "\f3d0"; }
70
+ .table thead tr th.tablespy-sort-none:before { content: "\f462"; }
71
+ .table thead tr th.tablespy-sort-asc,
72
+ .table thead tr th.tablespy-sort-desc,
73
+ .table thead tr th.tablespy-sort-none { cursor: pointer; }
74
+ .table thead tr th.tablespy-sort-empty:before { content: ""; }
75
+ .table thead tr th.tablespy-sort-empty { pointer-events: none; }
62
76
  .table caption + thead tr:first-child th,
63
- .table caption + thead tr:first-child td,
64
77
  .table colgroup + thead tr:first-child th,
65
- .table colgroup + thead tr:first-child td,
66
- .table thead:first-child tr:first-child th,
67
- .table thead:first-child tr:first-child td { border-top: 0; }
68
- .table tbody + tbody { border-top: 1px solid $color-haze; }
69
- .table-align-bottom th,
70
- .table-align-bottom td { vertical-align: bottom; }
71
- .table-align-middle th,
72
- .table-align-middle td { vertical-align: middle; }
73
- .table-align-top th,
74
- .table-align-top td { vertical-align: top; }
75
-
76
- /* # Sizes
77
- ================================================== */
78
- .table-condensed caption,
79
- .table-condensed th,
80
- .table-condensed tfoot td {
81
- font-size: 13px;
82
- padding: 5px;
78
+ .table thead:first-child tr:first-child th { border-top: 0; }
79
+ .table tbody + tbody {
80
+ border-top: 1px solid;
81
+ border-color: inherit;
83
82
  }
84
- .table-condensed caption { padding-top: 7px; }
85
- .table-condensed td {
86
- font-size: 14px;
87
- padding: 6px 5px 3px 5px;
88
- }
89
- .table-scrollable {
90
- height: 300px;
91
- overflow: auto;
83
+ @each $alignment in $alignments {
84
+ .table-align-#{$alignment} thead tr th,
85
+ .table-align-#{$alignment} tbody tr td,
86
+ .table-align-#{$alignment} tfoot tr td { vertical-align: $alignment; }
92
87
  }
93
88
 
94
89
  /* # Styles
95
90
  ================================================== */
96
91
  .table-bordered {
97
- border: 1px solid $color-haze;
92
+ border: 1px solid;
93
+ border-color: inherit;
98
94
  border-collapse: separate;
99
95
  border-left: 0;
100
96
  }
101
97
  .table-bordered caption {
102
- border: 1px solid $color-haze;
98
+ border: 1px solid;
99
+ border-color: inherit;
103
100
  border-bottom-width: 0;
104
101
  }
105
- .table-bordered th,
106
- .table-bordered td { border-left: 1px solid $color-haze; }
102
+ .table-bordered thead tr th,
103
+ .table-bordered tbody tr td,
104
+ .table-bordered tfoot tr td {
105
+ border-left: 1px solid;
106
+ border-color: inherit;
107
+ }
107
108
  .table-bordered caption + thead tr:first-child th,
108
- .table-bordered caption + tbody tr:first-child th,
109
109
  .table-bordered caption + tbody tr:first-child td,
110
110
  .table-bordered colgroup + thead tr:first-child th,
111
- .table-bordered colgroup + tbody tr:first-child th,
112
111
  .table-bordered colgroup + tbody tr:first-child td,
113
112
  .table-bordered thead:first-child tr:first-child th,
114
- .table-bordered tbody:first-child tr:first-child th,
115
113
  .table-bordered tbody:first-child tr:first-child td { border-top: 0; }
116
- .table-striped tbody > tr:nth-child(odd) > td,
117
- .table-striped tbody > tr:nth-child(odd) > th { background: $color-light-haze; }
118
- .table-hover tbody tr:hover > td,
119
- .table-hover tbody tr:hover > th { background: $color-haze; }
114
+ .table-striped tbody tr:nth-child(odd) td { background: $color-light-haze; }
115
+ .table-hover tbody tr:hover td { background: darken($color-light-haze, 2%); }
120
116
  .table-unbordered,
121
117
  .table-unbordered thead,
122
118
  .table-unbordered tbody,
123
- .table-unbordered th,
124
- .table-unbordered td { border: 0; }
119
+ .table-unbordered tfoot,
120
+ .table-unbordered thead tr th,
121
+ .table-unbordered tbody tr td,
122
+ .table-unbordered tfoot tr td { border: 0; }
123
+
124
+ /* # Sizes
125
+ ================================================== */
126
+ .table-condensed caption,
127
+ .table-condensed thead tr th,
128
+ .table-condensed tbody tr td,
129
+ .table-condensed tfoot tr td { padding: 6px 5px 5px 5px; }
130
+ .table-condensed caption,
131
+ .table-condensed tbody tr td {
132
+ font-size: 14px;
133
+ line-height: 22px;
134
+ }
135
+ .table-condensed caption { padding-top: 6px; }
136
+ .table-condensed thead tr th,
137
+ .table-condensed tfoot tr td {
138
+ font-size: 13px;
139
+ line-height: 21px;
140
+ }
141
+ .table-scrollable {
142
+ height: 300px;
143
+ overflow: auto;
144
+ }
125
145
 
126
146
  /* # Colors
127
147
  ================================================== */
128
- .table-dark caption,
129
- .table-dark th,
130
- .table-dark td {
148
+ .table-dark,
149
+ .table-dark caption {
131
150
  background: $color-black;
132
- border-color: $color-dark-black;
151
+ border-color: $color-dark-black !important;
133
152
  color: $color-white;
134
153
  }
135
- .table-dark th a { color: $color-white; }
136
- .table-dark tbody + tbody,
137
- .table-dark.table-bordered,
138
- .table-dark.table-bordered caption,
139
- .table-dark.table-bordered th,
140
- .table-dark.table-bordered td { border-color: $color-dark-black; }
141
- .table-dark.table-striped tbody > tr:nth-child(odd) > td,
142
- .table-dark.table-striped tbody > tr:nth-child(odd) > th { background: $color-light-black; }
143
- .table-dark.table-hover tbody tr:hover > td,
144
- .table-dark.table-hover tbody tr:hover > th { background: $color-dark-black; }
145
- .table-light caption,
146
- .table-light th,
147
- .table-light td {
154
+ .table-light,
155
+ .table-light caption {
148
156
  background: $color-light-haze;
149
- border-color: $color-dark-haze;
150
- }
151
- .table-light tbody + tbody,
152
- .table-light.table-bordered,
153
- .table-light.table-bordered caption,
154
- .table-light.table-bordered th,
155
- .table-light.table-bordered td { border-color: $color-dark-haze; }
156
- .table-light.table-striped tbody > tr:nth-child(odd) > td,
157
- .table-light.table-striped tbody > tr:nth-child(odd) > th { background: $color-haze; }
158
- .table-light.table-hover tbody tr:hover > td,
159
- .table-light.table-hover tbody tr:hover > th { background: $color-dark-haze; }
157
+ border-color: $color-dark-haze !important;
158
+ color: $color-black;
159
+ }
160
+ .table-white,
161
+ .table-white caption {
162
+ background: $color-white;
163
+ border-color: $color-haze !important;
164
+ color: $color-black;
165
+ }
166
+ .table-dark.table-striped tbody tr:nth-child(odd) td { background: $color-light-black; }
167
+ .table-dark.table-hover tbody tr:hover td { background: darken($color-black, 2%); }
168
+ .table-light.table-striped tbody tr:nth-child(odd) td { background: $color-haze; }
169
+ .table-light.table-hover tbody tr:hover td { background: darken($color-haze, 2%); }
160
170
 
161
171
  /* # Media Queries
162
172
  ================================================== */
163
173
  @media only screen and (max-width: 960px) {
164
174
  .table-responsive {
175
+ background: $color-transparent;
165
176
  border: 1px solid $color-haze;
166
177
  max-height: 300px;
167
178
  @include overflow-scrolling(touch);
@@ -169,27 +180,26 @@ table {
169
180
  }
170
181
  .table-responsive.table-dark { border-color: $color-dark-black; }
171
182
  .table-responsive.table-light { border-color: $color-dark-haze; }
172
- .table-responsive > .table > thead > tr > th,
173
- .table-responsive > .table > tbody > tr > th,
174
- .table-responsive > .table > tfoot > tr > th,
175
- .table-responsive > .table > thead > tr > td,
176
- .table-responsive > .table > tbody > tr > td,
177
- .table-responsive > .table > tfoot > tr > td { white-space: nowrap; }
178
- .table-responsive > .table-bordered { border: 0; }
179
- .table-responsive > .table-bordered > thead > tr > th:first-child,
180
- .table-responsive > .table-bordered > tbody > tr > th:first-child,
181
- .table-responsive > .table-bordered > tfoot > tr > th:first-child,
182
- .table-responsive > .table-bordered > thead > tr > td:first-child,
183
- .table-responsive > .table-bordered > tbody > tr > td:first-child,
184
- .table-responsive > .table-bordered > tfoot > tr > td:first-child { border-left: 0; }
185
- .table-responsive > .table-bordered > thead > tr > th:last-child,
186
- .table-responsive > .table-bordered > tbody > tr > th:last-child,
187
- .table-responsive > .table-bordered > tfoot > tr > th:last-child,
188
- .table-responsive > .table-bordered > thead > tr > td:last-child,
189
- .table-responsive > .table-bordered > tbody > tr > td:last-child,
190
- .table-responsive > .table-bordered > tfoot > tr > td:last-child { border-right: 0; }
191
- .table-responsive > .table-bordered > tbody > tr:last-child > th,
192
- .table-responsive > .table-bordered > tfoot > tr:last-child > th,
193
- .table-responsive > .table-bordered > tbody > tr:last-child > td,
194
- .table-responsive > .table-bordered > tfoot > tr:last-child > td { border-bottom: 0; }
183
+ .table-responsive .table thead tr th,
184
+ .table-responsive .table tbody tr td,
185
+ .table-responsive .table tfoot tr td { white-space: nowrap; }
186
+ .table-responsive .table-bordered { border: 0; }
187
+ .table-responsive .table-bordered thead tr th:first-child,
188
+ .table-responsive .table-bordered tbody tr td:first-child,
189
+ .table-responsive .table-bordered tfoot tr td:first-child { border-left: 0; }
190
+ .table-responsive .table-bordered thead tr th:last-child,
191
+ .table-responsive .table-bordered tbody tr td:last-child,
192
+ .table-responsive .table-bordered tfoot tr td:last-child { border-right: 0; }
193
+ .table-responsive .table-bordered tbody tr:last-child th,
194
+ .table-responsive .table-bordered tbody tr:last-child td,
195
+ .table-responsive .table-bordered tfoot tr:last-child td { border-bottom: 0; }
196
+ }
197
+ @media
198
+ only screen and (-webkit-min-device-pixel-ratio: 2),
199
+ only screen and ( min--moz-device-pixel-ratio: 2),
200
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
201
+ only screen and ( min-device-pixel-ratio: 2),
202
+ only screen and ( min-resolution: 192dpi),
203
+ only screen and ( min-resolution: 2dppx) {
204
+ .table caption { letter-spacing: 0.5px; }
195
205
  }
@@ -16,7 +16,8 @@
16
16
  z-index: 1060;
17
17
  }
18
18
  .timepicker-widget.dropdown-menu:before {
19
- border-bottom: 7px solid $color-dark-haze;
19
+ border-bottom: 7px solid;
20
+ border-color: inherit;
20
21
  border-right: 7px solid $color-transparent;
21
22
  border-left: 7px solid $color-transparent;
22
23
  content: "";
@@ -24,7 +25,8 @@
24
25
  position: absolute;
25
26
  }
26
27
  .timepicker-widget.dropdown-menu:after {
27
- border-bottom: 6px solid $color-dark-haze;
28
+ border-bottom: 6px solid;
29
+ border-color: inherit;
28
30
  border-right: 6px solid $color-transparent;
29
31
  border-left: 6px solid $color-transparent;
30
32
  content: "";
@@ -39,12 +41,14 @@
39
41
  .timepicker-widget.timepicker-orient-top:after { top: -6px; }
40
42
  .timepicker-widget.timepicker-orient-bottom:before {
41
43
  border-bottom: 0;
42
- border-top: 7px solid $color-dark-haze;
44
+ border-top: 7px solid;
45
+ border-color: inherit;
43
46
  bottom: -7px;
44
47
  }
45
48
  .timepicker-widget.timepicker-orient-bottom:after {
46
49
  border-bottom: 0;
47
- border-top: 6px solid $color-dark-haze;
50
+ border-top: 6px solid;
51
+ border-color: inherit;
48
52
  bottom: -6px;
49
53
  }
50
54
  .timepicker-widget > table {
@@ -60,7 +64,6 @@
60
64
  .timepicker-widget > table td:not(.separator) { min-width: 30px; }
61
65
  .timepicker-widget > table td span { width: 100%; }
62
66
  .timepicker-widget > table td > a {
63
- color: $color-black;
64
67
  display: inline-block;
65
68
  margin: 0;
66
69
  padding: 8px 0;
@@ -8,7 +8,8 @@
8
8
  ================================================== */
9
9
  .toolbar {
10
10
  background: $color-white;
11
- border-right: 1px solid $color-haze;
11
+ border-right: 1px solid;
12
+ border-color: $color-haze;
12
13
  box-sizing: border-box;
13
14
  height: 100%;
14
15
  min-width: 55px;
@@ -16,16 +17,17 @@
16
17
  width: 55px;
17
18
  }
18
19
  .toolbar-alt {
19
- border-left: 1px solid $color-haze;
20
+ border-left: 1px solid;
21
+ border-color: inherit;
20
22
  border-right: 0;
21
23
  }
22
24
  .toolbar > a {
23
25
  background: $color-transparent;
24
26
  border: 0;
25
- border-bottom: 1px solid $color-haze;
27
+ border-bottom: 1px solid;
28
+ border-color: inherit;
26
29
  border-radius: 0;
27
30
  box-sizing: border-box;
28
- color: $color-black;
29
31
  display: block;
30
32
  font-size: 21px;
31
33
  height: 55px;
@@ -42,12 +44,9 @@
42
44
  background: $color-primary;
43
45
  color: $color-white;
44
46
  }
45
- .toolbar > a[disabled],
46
- .toolbar > a[disabled]:hover,
47
- .toolbar > a[disabled]:active,
48
- .toolbar > a[disabled]:focus {
47
+ .toolbar > a[disabled] {
49
48
  background: $color-transparent;
50
- color: $color-black;
49
+ color: $color-gray;
51
50
  cursor: not-allowed;
52
51
  pointer-events: none;
53
52
  }
@@ -61,24 +60,12 @@
61
60
  .toolbar-dark {
62
61
  background: $color-black;
63
62
  border-color: $color-dark-black;
64
- }
65
- .toolbar-dark > a,
66
- .toolbar-dark > a[disabled],
67
- .toolbar-dark > a[disabled]:hover,
68
- .toolbar-dark > a[disabled]:active,
69
- .toolbar-dark > a[disabled]:focus {
70
- color: $color-gray;
71
- border-color: $color-dark-black;
63
+ color: $color-white;
72
64
  }
73
65
  .toolbar-light {
74
66
  background: $color-light-haze;
75
67
  border-color: $color-dark-haze;
76
68
  }
77
- .toolbar-light > a,
78
- .toolbar-light > a[disabled],
79
- .toolbar-light > a[disabled]:hover,
80
- .toolbar-light > a[disabled]:active,
81
- .toolbar-light > a[disabled]:focus { border-color: $color-dark-haze; }
82
69
 
83
70
  /* # Media Queries
84
71
  ================================================== */
@@ -93,5 +80,6 @@ only screen and ( min-device-pixel-ratio: 2),
93
80
  only screen and ( min-resolution: 192dpi),
94
81
  only screen and ( min-resolution: 2dppx) {
95
82
  .toolbar,
83
+ .toolbar-alt,
96
84
  .toolbar > a { border-width: 0.5px; }
97
85
  }