active_frontend 7.0.2 → 8.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 (26) hide show
  1. checksums.yaml +4 -4
  2. data/lib/active_frontend/version.rb +1 -1
  3. data/vendor/assets/javascripts/chart.js +7 -7
  4. data/vendor/assets/stylesheets/_ad.scss +15 -2
  5. data/vendor/assets/stylesheets/_alert.scss +15 -5
  6. data/vendor/assets/stylesheets/_button.scss +161 -1
  7. data/vendor/assets/stylesheets/_canvas.scss +1 -1
  8. data/vendor/assets/stylesheets/_carousel.scss +1 -1
  9. data/vendor/assets/stylesheets/_code.scss +20 -6
  10. data/vendor/assets/stylesheets/_dropdown.scss +35 -0
  11. data/vendor/assets/stylesheets/_footer.scss +62 -88
  12. data/vendor/assets/stylesheets/_form.scss +50 -25
  13. data/vendor/assets/stylesheets/_header.scss +89 -110
  14. data/vendor/assets/stylesheets/_label_and_badge.scss +60 -1
  15. data/vendor/assets/stylesheets/_list.scss +18 -2
  16. data/vendor/assets/stylesheets/_map.scss +15 -2
  17. data/vendor/assets/stylesheets/_modal.scss +1 -1
  18. data/vendor/assets/stylesheets/_nav_and_tab.scss +34 -22
  19. data/vendor/assets/stylesheets/_navbar.scss +20 -8
  20. data/vendor/assets/stylesheets/_panel.scss +24 -4
  21. data/vendor/assets/stylesheets/_sidebar.scss +22 -15
  22. data/vendor/assets/stylesheets/_swoggle.scss +25 -0
  23. data/vendor/assets/stylesheets/_trunk.scss +4 -3
  24. data/vendor/assets/stylesheets/_typography.scss +8 -0
  25. data/vendor/assets/stylesheets/activefrontend.scss +16 -13
  26. metadata +2 -2
data/vendor/assets/stylesheets/_map.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  /* Table of Contents
2
2
  ==================================================
3
- # Map */
3
+ # Map
4
+ # Media Queries */
4
5
 
5
6
  /* # Map
6
7
  ================================================== */
@@ -12,4 +13,16 @@
12
13
  min-height: 220px;
13
14
  min-width:220px;
14
15
  }
15
- .map-center { margin: 0 auto; }
16
+ .map-center { margin: 0 auto; }
17
+
18
+ /* # Media Queries
19
+ ================================================== */
20
+ @media
21
+ only screen and (-webkit-min-device-pixel-ratio: 2),
22
+ only screen and ( min--moz-device-pixel-ratio: 2),
23
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
24
+ only screen and ( min-device-pixel-ratio: 2),
25
+ only screen and ( min-resolution: 192dpi),
26
+ only screen and ( min-resolution: 2dppx) {
27
+ .map { border-width: 0.5px; }
28
+ }
data/vendor/assets/stylesheets/_modal.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  /* # Modal
7
7
  ================================================== */
8
8
  .modal-backdrop {
9
- background: rgba(35,41,55,0.9);
9
+ background: rgba(22,27,31,0.9);
10
10
  bottom: 0;
11
11
  height: 100%;
12
12
  left: 0;
data/vendor/assets/stylesheets/_nav_and_tab.scss CHANGED
@@ -1,7 +1,8 @@
1
1
  /* Table of Contents
2
2
  ==================================================
3
3
  # Nav
4
- # Tab */
4
+ # Tab
5
+ # Media Queries */
5
6
 
6
7
  /* # Nav
7
8
  ================================================== */
@@ -14,7 +15,7 @@
14
15
  .nav > .pull-left { float: left; }
15
16
  .nav > .pull-right { float: right; }
16
17
  .nav > li > a {
17
- color: $color-gray;
18
+ color: $color-gray-dark;
18
19
  display: block;
19
20
  font-size: 14px;
20
21
  font-weight: bold;
@@ -23,13 +24,13 @@
23
24
  .nav > li > a:hover,
24
25
  .nav > li > a:active,
25
26
  .nav > li > a:focus {
26
- color: $color-black;
27
+ color: $color-gray-dark;
27
28
  text-decoration: none;
28
29
  }
29
30
  .nav-header {
30
31
  background: $color-primary;
31
- border-top-right-radius: 3px;
32
- border-top-left-radius: 3px;
32
+ border-top-right-radius: 2px;
33
+ border-top-left-radius: 2px;
33
34
  color: $color-white;
34
35
  display: block;
35
36
  font-size: 14px;
@@ -49,19 +50,19 @@
49
50
  margin-right: -15px;
50
51
  }
51
52
  .nav-list > li > a {
52
- color: $color-gray;
53
+ color: $color-gray-dark;
53
54
  font-weight: bold;
54
55
  padding: 11px 15px;
55
56
  }
56
57
  .nav-list > li > a:hover,
57
- .nav-list > li > a:focus { background: $color-haze-light; }
58
+ .nav-list > li > a:focus { background: $color-haze; }
58
59
  .nav-list > li > a:active,
59
60
  .nav-list > .active > a,
60
61
  .nav-list > .active > a:hover,
61
62
  .nav-list > .active > a:active,
62
63
  .nav-list > .active > a:focus {
63
- background: $color-haze;
64
- color: $color-black;
64
+ background: $color-haze-light;
65
+ color: $color-primary;
65
66
  }
66
67
  .nav-list > .divider {
67
68
  background: $color-haze-light;
@@ -79,7 +80,7 @@
79
80
  }
80
81
  .nav-tabs:after,
81
82
  .nav-pills:after { clear: both; }
82
- .nav-tabs { border-bottom: 1px solid $color-haze-light; }
83
+ .nav-tabs { border-bottom: 1px solid $color-haze; }
83
84
  .nav-tabs > li,
84
85
  .nav-pills > li { float: left; }
85
86
  .nav-tabs > li > a {
@@ -91,14 +92,14 @@
91
92
  .nav-tabs > .active > a:hover,
92
93
  .nav-tabs > .active > a:active,
93
94
  .nav-tabs > .active > a:focus {
94
- border-bottom-color: $color-haze-light;
95
+ border-bottom-color: $color-primary;
95
96
  color: $color-primary;
96
97
  }
97
98
  .nav-tabs .open a.dropdown-toggle { background: transparent; }
98
99
  .nav-pills > li > a {
99
100
  background: $color-haze-light;
100
101
  border-radius: 2px;
101
- color: $color-gray;
102
+ color: $color-gray-dark;
102
103
  margin-right: 3px;
103
104
  padding: 9px 10px;
104
105
  }
@@ -117,22 +118,21 @@
117
118
  .nav-tabs.nav-stacked { border-bottom: 0; }
118
119
  .nav-tabs.nav-stacked > li > a {
119
120
  background: $color-haze-light;
120
- color: $color-gray;
121
+ color: $color-gray-dark;
121
122
  padding: 10px 10px 8px 10px;
122
123
  }
123
124
  .nav-tabs.nav-stacked > li:first-child > a {
124
- border-top-right-radius: 3px;
125
- border-top-left-radius: 3px;
125
+ border-top-right-radius: 2px;
126
+ border-top-left-radius: 2px;
126
127
  }
127
128
  .nav-tabs.nav-stacked > li:last-child > a {
128
- border-bottom-right-radius: 3px;
129
- border-bottom-left-radius: 3px;
129
+ border-bottom-right-radius: 2px;
130
+ border-bottom-left-radius: 2px;
130
131
  }
131
132
  .nav-tabs.nav-stacked > li > a:hover,
132
133
  .nav-tabs.nav-stacked > li > a:active,
133
134
  .nav-tabs.nav-stacked > li > a:focus {
134
- background: $color-haze-light;
135
- color: $color-black;
135
+ background: $color-haze;
136
136
  z-index: 2;
137
137
  }
138
138
  .nav-tabs.nav-stacked > .active > a {
@@ -170,7 +170,7 @@
170
170
  .pill-content > .pill-pane { display: none; }
171
171
  .tab-content > .active,
172
172
  .pill-content > .active { display: block; }
173
- .tabs-below > .nav-tabs > li > a { border-radius: 0 0 3px 3px; }
173
+ .tabs-below > .nav-tabs > li > a { border-radius: 0 0 2px 2px; }
174
174
  .tabs-left > .nav-tabs > li,
175
175
  .tabs-right > .nav-tabs > li { float: none; }
176
176
  .tabs-left > .nav-tabs > li > a,
@@ -183,9 +183,21 @@
183
183
  float: left;
184
184
  margin-right: 19px;
185
185
  }
186
- .tabs-left > .nav-tabs > li > a { border-radius: 3px 0 0 3px; }
186
+ .tabs-left > .nav-tabs > li > a { border-radius: 2px 0 0 2px; }
187
187
  .tabs-right > .nav-tabs {
188
188
  float: right;
189
189
  margin-left: 19px;
190
190
  }
191
- .tabs-right > .nav-tabs > li > a { border-radius: 0 3px 3px 0; }
191
+ .tabs-right > .nav-tabs > li > a { border-radius: 0 2px 2px 0; }
192
+
193
+ /* # Media Queries
194
+ ================================================== */
195
+ @media
196
+ only screen and (-webkit-min-device-pixel-ratio: 2),
197
+ only screen and ( min--moz-device-pixel-ratio: 2),
198
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
199
+ only screen and ( min-device-pixel-ratio: 2),
200
+ only screen and ( min-resolution: 192dpi),
201
+ only screen and ( min-resolution: 2dppx) {
202
+ .nav-tabs { border-width: 0.5px; }
203
+ }
data/vendor/assets/stylesheets/_navbar.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  .navbar {
17
17
  background: $color-white;
18
18
  border-collapse: separate;
19
- border-top: 2px solid $color-haze;
19
+ border-top: 1px solid $color-haze;
20
20
  box-sizing: border-box;
21
21
  display: table;
22
22
  height: 48px;
@@ -24,7 +24,7 @@
24
24
  width: 100%;
25
25
  }
26
26
  .navbar > a {
27
- color: $color-primary;
27
+ color: $color-gray-dark;
28
28
  display: table-cell;
29
29
  float: none;
30
30
  font-size: 27px;
@@ -32,22 +32,34 @@
32
32
  text-align: center;
33
33
  width: 1%;
34
34
  }
35
+ .navbar > a:hover,
36
+ .navbar > a.active,
37
+ .navbar > a:active,
38
+ .navbar > a:focus { color: $color-primary; }
35
39
 
36
40
  /* # Colors
37
41
  ================================================== */
38
- .navbar-dark,
39
- .navbar-primary { border-color: rgba(0,0,0,0.2); }
40
- .navbar-dark { background: $color-black; }
41
- .navbar-primary { background: $color-primary; }
42
- .navbar-dark > a,
43
- .navbar-primary > a { color: $color-white; }
42
+ .navbar-dark {
43
+ background: $color-black;
44
+ border-color: $color-black-dark;
45
+ }
44
46
  .navbar-light {
45
47
  background: $color-haze-light;
46
48
  border-color: $color-haze-dark;
47
49
  }
50
+ .navbar-dark > a { color: $color-white; }
48
51
 
49
52
  /* # Media Queries
50
53
  ================================================== */
51
54
  @media only screen and (min-width: 768px) {
52
55
  .navbar { display: none; }
56
+ }
57
+ @media
58
+ only screen and (-webkit-min-device-pixel-ratio: 2),
59
+ only screen and ( min--moz-device-pixel-ratio: 2),
60
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
61
+ only screen and ( min-device-pixel-ratio: 2),
62
+ only screen and ( min-resolution: 192dpi),
63
+ only screen and ( min-resolution: 2dppx) {
64
+ .navbar { border-width: 0.5px; }
53
65
  }
data/vendor/assets/stylesheets/_panel.scss CHANGED
@@ -1,25 +1,29 @@
1
1
  /* Table of Contents
2
2
  ==================================================
3
- # Panel */
3
+ # Panel
4
+ # Media Queries */
4
5
 
5
6
  /* # Panel
6
7
  ================================================== */
7
8
  .panel {
8
9
  background: $color-white;
9
10
  border: 1px solid $color-haze-dark;
11
+ border-radius: 2px;
10
12
  margin-bottom: 20px;
11
13
  }
12
14
  .panel-header {
13
15
  background: $color-haze-light;
14
16
  border-bottom: 1px solid $color-haze-dark;
15
- padding: 16px 15px 14px 15px;
17
+ border-top-left-radius: 2px;
18
+ border-top-right-radius: 2px;
19
+ padding: 14px 15px 12px 15px;
16
20
  }
17
21
  .panel-header > .btn { margin-top: -2px; }
18
22
  .panel-header > .btn-group { margin: -5px 0 -3px 0; }
19
23
  .panel-title {
20
24
  color: $color-black;
21
25
  display: inline-block;
22
- font-size: 17px;
26
+ font-size: 16px;
23
27
  line-height: 1;
24
28
  margin-bottom: 0;
25
29
  margin-top: 0;
@@ -37,5 +41,21 @@
37
41
  .panel-footer {
38
42
  background: $color-haze-light;
39
43
  border-top: 1px solid $color-haze-dark;
40
- padding: 13px 15px 10px 15px;
44
+ border-bottom-left-radius: 2px;
45
+ border-bottom-right-radius: 2px;
46
+ padding: 15px 15px 12px 15px;
47
+ }
48
+
49
+ /* # Media Queries
50
+ ================================================== */
51
+ @media
52
+ only screen and (-webkit-min-device-pixel-ratio: 2),
53
+ only screen and ( min--moz-device-pixel-ratio: 2),
54
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
55
+ only screen and ( min-device-pixel-ratio: 2),
56
+ only screen and ( min-resolution: 192dpi),
57
+ only screen and ( min-resolution: 2dppx) {
58
+ .panel,
59
+ .panel-header,
60
+ .panel-footer { border-width: 0.5px; }
41
61
  }
data/vendor/assets/stylesheets/_sidebar.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  ================================================== */
9
9
  .sidebar {
10
10
  background: $color-white;
11
- border-left: 2px solid $color-haze-light;
11
+ border-left: 1px solid $color-haze;
12
12
  box-sizing: border-box;
13
13
  height: 100%;
14
14
  min-width: 280px;
@@ -16,11 +16,11 @@
16
16
  width: 280px;
17
17
  }
18
18
  .sidebar-alt {
19
- border-right: 2px solid $color-haze-light;
19
+ border-right: 1px solid $color-haze;
20
20
  border-left: 0;
21
21
  }
22
22
  .sidebar-header {
23
- border-bottom: 1px solid $color-haze-light;
23
+ border-bottom: 1px solid $color-haze;
24
24
  font-size: 12px;
25
25
  line-height: 12px;
26
26
  padding: 12px 20px 10px 10px;
@@ -59,22 +59,18 @@
59
59
 
60
60
  /* # Colors
61
61
  ================================================== */
62
- .sidebar-dark,
63
- .sidebar-primary { border-color: rgba(0,0,0,0.2); }
64
- .sidebar-dark { background: $color-black; }
65
- .sidebar-primary { background: $color-primary; }
66
- .sidebar-dark.sidebar-alt,
67
- .sidebar-dark > .sidebar-header,
68
- .sidebar-dark > .sidebar-scrollable,
69
- .sidebar-primary.sidebar-alt,
70
- .sidebar-primary > .sidebar-header,
71
- .sidebar-primary > .sidebar-scrollable { border-color: rgba(0,0,0,0.2); }
72
- .sidebar-dark > .sidebar-header > h6,
73
- .sidebar-primary > .sidebar-header > h6 { color: $color-white; }
62
+ .sidebar-dark {
63
+ background: $color-black;
64
+ border-color: $color-black-dark;
65
+ }
74
66
  .sidebar-light {
75
67
  background: $color-haze-light;
76
68
  border-color: $color-haze-dark;
77
69
  }
70
+ .sidebar-dark.sidebar-alt,
71
+ .sidebar-dark > .sidebar-header,
72
+ .sidebar-dark > .sidebar-scrollable { border-color: $color-black-dark; }
73
+ .sidebar-dark > .sidebar-header > h6 { color: $color-white; }
78
74
  .sidebar-light.sidebar-alt,
79
75
  .sidebar-light > .sidebar-header,
80
76
  .sidebar-light > .sidebar-scrollable { border-color: $color-haze-dark; }
@@ -95,4 +91,15 @@
95
91
  }
96
92
  @media only screen and (max-width: 959px) {
97
93
  .sidebar { display: none; }
94
+ }
95
+ @media
96
+ only screen and (-webkit-min-device-pixel-ratio: 2),
97
+ only screen and ( min--moz-device-pixel-ratio: 2),
98
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
99
+ only screen and ( min-device-pixel-ratio: 2),
100
+ only screen and ( min-resolution: 192dpi),
101
+ only screen and ( min-resolution: 2dppx) {
102
+ .sidebar,
103
+ .sidebar-header,
104
+ .sidebar-scrollable { border-width: 0.5px; }
98
105
  }
data/vendor/assets/stylesheets/_swoggle.scss CHANGED
@@ -74,21 +74,34 @@
74
74
  }
75
75
  .swoggle.swoggle-on div { margin-left: 0; }
76
76
  .swoggle.swoggle-off div { margin-left: -50%; }
77
+ .swoggle.swoggle-on.swoggle-black-light,
77
78
  .swoggle.swoggle-on.swoggle-black,
79
+ .swoggle.swoggle-on.swoggle-black-dark,
78
80
  .swoggle.swoggle-on.swoggle-blue,
79
81
  .swoggle.swoggle-on.swoggle-gray-light,
80
82
  .swoggle.swoggle-on.swoggle-gray,
81
83
  .swoggle.swoggle-on.swoggle-gray-dark,
82
84
  .swoggle.swoggle-on.swoggle-green,
85
+ .swoggle.swoggle-on.swoggle-indigo,
86
+ .swoggle.swoggle-on.swoggle-lime,
83
87
  .swoggle.swoggle-on.swoggle-orange,
84
88
  .swoggle.swoggle-on.swoggle-pink,
85
89
  .swoggle.swoggle-on.swoggle-purple,
86
90
  .swoggle.swoggle-on.swoggle-red,
91
+ .swoggle.swoggle-on.swoggle-teal,
87
92
  .swoggle.swoggle-on.swoggle-yellow { color: $color-white; }
93
+ .swoggle.swoggle-on.swoggle-black-light {
94
+ background: $color-black-light;
95
+ border-color: $color-black-light;
96
+ }
88
97
  .swoggle.swoggle-on.swoggle-black {
89
98
  background: $color-black;
90
99
  border-color: $color-black;
91
100
  }
101
+ .swoggle.swoggle-on.swoggle-black-dark {
102
+ background: $color-black-dark;
103
+ border-color: $color-black-dark;
104
+ }
92
105
  .swoggle.swoggle-on.swoggle-blue {
93
106
  background: $color-blue;
94
107
  border-color: $color-blue;
@@ -109,6 +122,14 @@
109
122
  background: $color-green;
110
123
  border-color: $color-green;
111
124
  }
125
+ .swoggle.swoggle-on.swoggle-indigo {
126
+ background: $color-indigo;
127
+ border-color: $color-indigo;
128
+ }
129
+ .swoggle.swoggle-on.swoggle-lime {
130
+ background: $color-lime;
131
+ border-color: $color-lime;
132
+ }
112
133
  .swoggle.swoggle-on.swoggle-orange {
113
134
  background: $color-orange;
114
135
  border-color: $color-orange;
@@ -125,6 +146,10 @@
125
146
  background: $color-red;
126
147
  border-color: $color-red;
127
148
  }
149
+ .swoggle.swoggle-on.swoggle-teal {
150
+ background: $color-teal;
151
+ border-color: $color-teal;
152
+ }
128
153
  .swoggle.swoggle-on.swoggle-yellow {
129
154
  background: $color-yellow;
130
155
  border-color: $color-yellow;
data/vendor/assets/stylesheets/_trunk.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  ================================================== */
7
7
  .trunk {
8
8
  background: $color-black;
9
- border-bottom: 2px solid rgba(0,0,0,0.2);
9
+ border-bottom: 1px solid $color-black-dark;
10
10
  left: 0;
11
11
  position: fixed;
12
12
  right: 0;
@@ -14,6 +14,7 @@
14
14
  z-index: 1040;
15
15
  }
16
16
  .trunk-buffer { padding: 30px 0; }
17
+ .trunk-search > input { border-color: $color-black-dark; }
17
18
  .trunk-nav,
18
19
  .trunk-user {
19
20
  list-style-type: none;
@@ -45,7 +46,7 @@
45
46
  .trunk-user > li > a {
46
47
  -webkit-appearance: none;
47
48
  appearance: none;
48
- color: $color-gray;
49
+ color: $color-white;
49
50
  cursor: pointer;
50
51
  display: block;
51
52
  -webkit-font-smoothing: antialiased;
@@ -64,7 +65,7 @@
64
65
  white-space: nowrap;
65
66
  }
66
67
  .trunk-nav > li > a {
67
- border: 1px solid rgba(0,0,0,0.2);
68
+ border: 1px solid $color-black-dark;
68
69
  padding: 11px 0 9px 0;
69
70
  }
70
71
  .trunk-user > li > a { padding: 9px 0 7px 0; }