active_frontend 4.5.1 → 5.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 (35) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/placeholders/camera.png +0 -0
  3. data/app/assets/images/placeholders/person.png +0 -0
  4. data/app/assets/images/placeholders/picture.png +0 -0
  5. data/lib/active_frontend/version.rb +1 -1
  6. data/vendor/assets/stylesheets/alert.scss +4 -4
  7. data/vendor/assets/stylesheets/aside.scss +3 -3
  8. data/vendor/assets/stylesheets/breadcrumb.scss +2 -2
  9. data/vendor/assets/stylesheets/button.scss +82 -40
  10. data/vendor/assets/stylesheets/code.scss +53 -51
  11. data/vendor/assets/stylesheets/datepicker.scss +6 -6
  12. data/vendor/assets/stylesheets/dropdown.scss +6 -1
  13. data/vendor/assets/stylesheets/footer.scss +6 -6
  14. data/vendor/assets/stylesheets/form.scss +4 -4
  15. data/vendor/assets/stylesheets/header.scss +66 -17
  16. data/vendor/assets/stylesheets/image.scss +3 -2
  17. data/vendor/assets/stylesheets/label_and_badge.scss +21 -20
  18. data/vendor/assets/stylesheets/link.scss +6 -6
  19. data/vendor/assets/stylesheets/loader.scss +4 -4
  20. data/vendor/assets/stylesheets/modal.scss +14 -5
  21. data/vendor/assets/stylesheets/nav_and_tab.scss +4 -4
  22. data/vendor/assets/stylesheets/navbar.scss +3 -3
  23. data/vendor/assets/stylesheets/pagination.scss +1 -1
  24. data/vendor/assets/stylesheets/panel.scss +2 -5
  25. data/vendor/assets/stylesheets/placeholder.scss +1 -1
  26. data/vendor/assets/stylesheets/progress.scss +1 -1
  27. data/vendor/assets/stylesheets/reset.scss +1 -0
  28. data/vendor/assets/stylesheets/sidebar.scss +2 -2
  29. data/vendor/assets/stylesheets/spinner.scss +29 -29
  30. data/vendor/assets/stylesheets/swoggle.scss +12 -12
  31. data/vendor/assets/stylesheets/timepicker.scss +1 -1
  32. data/vendor/assets/stylesheets/trunk.scss +9 -6
  33. data/vendor/assets/stylesheets/typeahead.scss +1 -1
  34. data/vendor/assets/stylesheets/typography.scss +8 -8
  35. metadata +2 -2
@@ -44,7 +44,7 @@
44
44
  border-top: 6px rgba(230,237,242,1);
45
45
  }
46
46
  .dow {
47
- color: rgba(91,146,250,1);
47
+ color: rgba(85,94,113,1);
48
48
  font-weight: bold;
49
49
  }
50
50
  .datepicker > div { display: none; }
@@ -68,7 +68,7 @@
68
68
  width: 20px;
69
69
  }
70
70
  .datepicker td.day:hover {
71
- background: rgba(91,146,250,1);
71
+ background: rgba(0,153,255,1);
72
72
  border-radius: 2px;
73
73
  color: rgba(255,255,255,1);
74
74
  cursor: pointer;
@@ -90,7 +90,7 @@
90
90
  .datepicker td.active:hover.disabled,
91
91
  .datepicker td.active[disabled],
92
92
  .datepicker td.active:hover[disabled] {
93
- background: rgba(91,146,250,1);
93
+ background: rgba(0,153,255,1);
94
94
  border-radius: 2px;
95
95
  color: rgba(255,255,255,1);
96
96
  }
@@ -104,7 +104,7 @@
104
104
  width: 46px;
105
105
  }
106
106
  .datepicker td span:hover {
107
- background: rgba(91,146,250,1);
107
+ background: rgba(0,153,255,1);
108
108
  color: rgba(255,255,255,1);
109
109
  cursor: pointer;
110
110
  }
@@ -115,7 +115,7 @@
115
115
  .datepicker td span.active.active,
116
116
  .datepicker td span.active.disabled,
117
117
  .datepicker td span.active[disabled] {
118
- background: rgba(91,146,250,1);
118
+ background: rgba(0,153,255,1);
119
119
  color: rgba(255,255,255,1);
120
120
  }
121
121
  .datepicker th.switch {
@@ -125,7 +125,7 @@
125
125
  .datepicker th.next,
126
126
  .datepicker th.prev { font-size: 17px; }
127
127
  .datepicker thead tr:first-child th:hover {
128
- background: rgba(91,146,250,1);
128
+ background: rgba(0,153,255,1);
129
129
  border-radius: 2px;
130
130
  color: rgba(255,255,255,1);
131
131
  cursor: pointer;
@@ -58,7 +58,12 @@
58
58
  .dropdown-submenu:active > a,
59
59
  .dropdown-submenu.active > a,
60
60
  .dropdown-submenu:hover > a,
61
- .dropdown-submenu:focus > a { color: rgba(91,146,250,1); }
61
+ .dropdown-submenu:focus > a { color: rgba(0,153,255,1); }
62
+ .dropdown-menu > li > a > i:first-child {
63
+ display: inline-block;
64
+ min-width: 14px;
65
+ text-align: center;
66
+ }
62
67
  .dropdown-menu > li .badge,
63
68
  .dropdown-menu > li .label { margin: -8px 0 -7px 0; }
64
69
  .open > .dropdown-menu { display: block; }
@@ -15,8 +15,8 @@
15
15
  z-index: 1030;
16
16
  }
17
17
  .footer {
18
- background: rgba(42,44,48,1);
19
- border-top: 4px solid rgba(255,255,255,0.1);
18
+ background: rgba(52,64,68,1);
19
+ border-top: 2px solid rgba(255,255,255,0.2);
20
20
  box-sizing: border-box;
21
21
  width: 100%;
22
22
  margin-top: 40px;
@@ -50,7 +50,7 @@
50
50
  .footer > .footer-nav > li > a.active,
51
51
  .footer > .footer-nav > li > a:active,
52
52
  .footer > .footer-nav > li > a:hover,
53
- .footer > .footer-nav > li > a:focus { color: rgba(91,146,250,1); }
53
+ .footer > .footer-nav > li > a:focus { color: rgba(0,153,255,1); }
54
54
  .footer-footnote {
55
55
  float: left;
56
56
  color: rgba(255,255,255,1);
@@ -63,10 +63,10 @@
63
63
  ================================================== */
64
64
  .footer.footer-alt {
65
65
  background: rgba(255,255,255,1);
66
- border-top: 2px solid rgba(235,242,247,1);
66
+ border-top-color: rgba(245,248,250,1);
67
67
  }
68
- .footer.footer-alt > .footer-brand > a { color: rgba(136,153,166,1); }
69
- .footer.footer-alt > .footer-nav > li > a { color: rgba(136,153,166,1); }
68
+ .footer.footer-alt > .footer-brand > a,
69
+ .footer.footer-alt > .footer-nav > li > a,
70
70
  .footer.footer-alt > .footer-footnote { color: rgba(136,153,166,1); }
71
71
 
72
72
  /* # Application
@@ -88,7 +88,7 @@ input[type="search"]:focus,
88
88
  input[type="tel"]:focus,
89
89
  input[type="color"]:focus,
90
90
  .uneditable-input:focus {
91
- border-color: rgba(91,146,250,1);
91
+ border-color: rgba(0,153,255,1);
92
92
  outline: 0;
93
93
  outline: thin dotted \9;
94
94
  -webkit-transition: background 150ms linear;
@@ -161,12 +161,12 @@ textarea::-webkit-input-placeholder {
161
161
  input:focus:invalid,
162
162
  textarea:focus:invalid,
163
163
  select:focus:invalid {
164
- border-color: rgba(225,80,80,1);
165
- color: rgba(225,80,80,1);
164
+ border-color: rgba(240,35,17,1);
165
+ color: rgba(240,35,17,1);
166
166
  }
167
167
  input:focus:invalid:focus,
168
168
  textarea:focus:invalid:focus,
169
- select:focus:invalid:focus { border-color: rgba(225,80,80,1); }
169
+ select:focus:invalid:focus { border-color: rgba(240,35,17,1); }
170
170
  input[disabled],
171
171
  textarea[disabled],
172
172
  select[disabled],
@@ -3,6 +3,7 @@
3
3
  # Header
4
4
  # Alternate
5
5
  # Application
6
+ # Border
6
7
  # Media Queries */
7
8
 
8
9
  /* # Header
@@ -16,7 +17,7 @@
16
17
  }
17
18
  .header {
18
19
  background: rgba(255,255,255,1);
19
- border-bottom: 4px solid rgba(245,248,250,1);
20
+ border-bottom: 2px solid rgba(245,248,250,1);
20
21
  box-sizing: border-box;
21
22
  height: 65px;
22
23
  padding: 15px 0;
@@ -24,7 +25,7 @@
24
25
  }
25
26
  .header-brand { float: left; }
26
27
  .header-brand > a {
27
- color: rgba(91,146,250,1);
28
+ color: rgba(0,153,255,1);
28
29
  font-size: 30px;
29
30
  line-height: 40px;
30
31
  text-decoration: none;
@@ -40,7 +41,7 @@
40
41
  }
41
42
  .header-search > input { margin: 0; }
42
43
  .header-nav {
43
- color: rgba(85,94,113,1);
44
+ color: rgba(42,44,48,1);
44
45
  float: left;
45
46
  list-style-type: none;
46
47
  margin: 5px 0 0 20px;
@@ -57,7 +58,7 @@
57
58
  }
58
59
  .header-nav > li.btn-group + li.btn-group { margin-left: 0; }
59
60
  .header-nav > li > a {
60
- color: rgba(85,94,113,1);
61
+ color: rgba(42,44,48,1);
61
62
  font-size: 12px;
62
63
  font-weight: 500;
63
64
  letter-spacing: 1px;
@@ -68,7 +69,7 @@
68
69
  .header-nav > li > a.active,
69
70
  .header-nav > li > a:active,
70
71
  .header-nav > li > a:hover,
71
- .header-nav > li > a:focus { color: rgba(91,146,250,1); }
72
+ .header-nav > li > a:focus { color: rgba(0,153,255,1); }
72
73
  .header-nav-alt {
73
74
  float: right;
74
75
  list-style-type: none;
@@ -76,7 +77,7 @@
76
77
  padding: 0;
77
78
  }
78
79
  .header-nav-alt > li {
79
- color: rgba(85,94,113,1);
80
+ color: rgba(42,44,48,1);
80
81
  display: inline-block;
81
82
  font-size: 12px;
82
83
  font-weight: 500;
@@ -89,7 +90,7 @@
89
90
  .header-nav-alt > li.btn-group + li.btn-group { margin-left: 0; }
90
91
  .header-nav-alt > li.btn-group { margin-top: 2px; }
91
92
  .header-nav-alt > li > a {
92
- color: rgba(85,94,113,1);
93
+ color: rgba(42,44,48,1);
93
94
  letter-spacing: 1px;
94
95
  padding: 15px 0 13px 0;
95
96
  text-transform: uppercase;
@@ -97,16 +98,22 @@
97
98
  .header-nav-alt > li > a.active,
98
99
  .header-nav-alt > li > a:active,
99
100
  .header-nav-alt > li > a:hover,
100
- .header-nav-alt > li > a:focus { color: rgba(91,146,250,1); }
101
+ .header-nav-alt > li > a:focus { color: rgba(0,153,255,1); }
101
102
  .header-nav-alt > li.inverse > a {
102
- background: rgba(91,146,250,1);
103
+ background: rgba(0,153,255,1);
104
+ border: 1px solid rgba(0,153,255,1);
103
105
  border-radius: 500px;
106
+ box-sizing: border-box;
104
107
  color: rgba(255,255,255,1);
105
108
  padding-left: 20px;
106
109
  padding-right: 20px;
107
110
  }
108
- .header-nav-alt > li.inverse > a:hover {
109
- background: rgba(85,94,113,1);
111
+ .header-nav-alt > li.inverse > a.active,
112
+ .header-nav-alt > li.inverse > a:active,
113
+ .header-nav-alt > li.inverse > a:hover,
114
+ .header-nav-alt > li.inverse > a:focus {
115
+ background: rgba(42,44,48,1);
116
+ border-color: rgba(42,44,48,1);
110
117
  color: rgba(255,255,255,1);
111
118
  }
112
119
  .header-toolchain {
@@ -122,7 +129,7 @@
122
129
  .header-toolchain > li:first-child { margin: 0; }
123
130
  .header-toolchain > li.btn-group + li.btn-group { margin-left: 0; }
124
131
  .header-toolchain > li > a {
125
- color: rgba(85,94,113,1);
132
+ color: rgba(42,44,48,1);
126
133
  font-size: 30px;
127
134
  line-height: 30px;
128
135
  text-decoration: none;
@@ -130,19 +137,19 @@
130
137
  .header-toolchain > li > a.active,
131
138
  .header-toolchain > li > a:active,
132
139
  .header-toolchain > li > a:hover,
133
- .header-toolchain > li > a:focus { color: rgba(91,146,250,1); }
140
+ .header-toolchain > li > a:focus { color: rgba(0,153,255,1); }
134
141
  .header-user {
135
142
  float: right;
136
143
  font-size: 13px;
137
144
  margin: -1px 0 0 20px;
138
145
  }
139
146
  .header-user > a {
140
- color: rgba(85,94,113,1);
147
+ color: rgba(42,44,48,1);
141
148
  text-decoration: none;
142
149
  }
143
150
  .header-user img,
144
151
  .header-user-placeholder {
145
- background: rgba(85,94,113,1);
152
+ background: rgba(42,44,48,1);
146
153
  border-radius: 500px;
147
154
  color: rgba(255,255,255,1);
148
155
  display: inline-block;
@@ -159,7 +166,7 @@
159
166
  }
160
167
  .header-user > ul.dropdown-menu { margin: -5px 10px 0 0; }
161
168
  .header-toggle > a {
162
- color: rgba(91,146,250,1);
169
+ color: rgba(0,153,255,1);
163
170
  float: right;
164
171
  font-size: 40px;
165
172
  padding: 4px 0px 3px 14px;
@@ -168,12 +175,54 @@
168
175
 
169
176
  /* # Alternate
170
177
  ================================================== */
171
- .header.header-alt { border-bottom-color: rgba(255,255,255,1); }
178
+ .header.header-alt {
179
+ background: rgba(0,153,255,1);
180
+ border-color: rgba(0,0,0,0.2);
181
+ }
182
+ .header.header-alt .header-brand > a { color: rgba(255,255,255,1) }
183
+ .header.header-alt .header-nav > li > a { color: rgba(42,44,48,1); }
184
+ .header.header-alt .header-nav > li > a.active,
185
+ .header.header-alt .header-nav > li > a:active,
186
+ .header.header-alt .header-nav > li > a:hover,
187
+ .header.header-alt .header-nav > li > a:focus { color: rgba(255,255,255,1); }
188
+ .header.header-alt .header-nav-alt > li > a { color: rgba(42,44,48,1); }
189
+ .header.header-alt .header-nav-alt > li > a.active,
190
+ .header.header-alt .header-nav-alt > li > a:active,
191
+ .header.header-alt .header-nav-alt > li > a:hover,
192
+ .header.header-alt .header-nav-alt > li > a:focus { color: rgba(255,255,255,1); }
193
+ .header.header-alt .header-nav-alt > li.inverse > a {
194
+ background: transparent;
195
+ border-color: rgba(255,255,255,1);
196
+ color: rgba(255,255,255,1);
197
+ }
198
+ .header.header-alt .header-nav-alt > li.inverse > a.active,
199
+ .header.header-alt .header-nav-alt > li.inverse > a:active,
200
+ .header.header-alt .header-nav-alt > li.inverse > a:hover,
201
+ .header.header-alt .header-nav-alt > li.inverse > a:focus {
202
+ border-color: rgba(42,44,48,1);
203
+ color: rgba(42,44,48,1);
204
+ }
205
+ .header.header-alt .header-toolchain > li > a { color: rgba(42,44,48,1); }
206
+ .header.header-alt .header-toolchain > li > a.active,
207
+ .header.header-alt .header-toolchain > li > a:active,
208
+ .header.header-alt .header-toolchain > li > a:hover,
209
+ .header.header-alt .header-toolchain > li > a:focus { color: rgba(255,255,255,1); }
210
+ .header.header-alt .header-user > a { color: rgba(42,44,48,1); }
211
+ .header.header-alt .header-user img,
212
+ .header.header-alt .header-user-placeholder {
213
+ background: rgba(42,44,48,1);
214
+ color: rgba(255,255,255,1);
215
+ }
216
+ .header.header-alt .header-toggle > a { color: rgba(255,255,255,1); }
172
217
 
173
218
  /* # Application
174
219
  ================================================== */
175
220
  .header.header-app { width: calc(100% - 280px); }
176
221
 
222
+ /* # Border
223
+ ================================================== */
224
+ .header.header-borderless { border-bottom-color: transparent; }
225
+
177
226
  /* # Media Queries
178
227
  ================================================== */
179
228
  @media only screen and (max-width: 1365px) {
@@ -7,7 +7,7 @@
7
7
  /* # Image
8
8
  ================================================== */
9
9
  img {
10
- border-radius: 0;
10
+ border-radius: 3px;
11
11
  border: 0;
12
12
  display: block;
13
13
  height: auto;
@@ -20,9 +20,10 @@ img {
20
20
  ================================================== */
21
21
  .img-circle { border-radius: 500px; }
22
22
  .img-center { margin: 0 auto; }
23
+ .img-square { border-radius: 0; }
23
24
 
24
25
  /* # Media Queries
25
26
  ================================================== */
26
27
  @media only screen and (max-width: 767px) {
27
- .img-icon { max-height: 60%; }
28
+ .img-icon { max-width: 60%; }
28
29
  }
@@ -6,8 +6,9 @@
6
6
  ================================================== */
7
7
  .badge,
8
8
  .label {
9
- background: rgba(245,248,250,1);
10
- border: 1px solid rgba(245,248,250,1);
9
+ background: rgba(240,243,245,1);
10
+ border: 1px solid rgba(240,243,245,1);
11
+ border-radius: 2px;
11
12
  color: rgba(42,44,48,1);
12
13
  display: inline-block;
13
14
  padding: 6px;
@@ -47,28 +48,28 @@
47
48
  }
48
49
  .badge-blue,
49
50
  .label-blue {
50
- background: rgba(91,146,250,1);
51
- border-color: rgba(91,146,250,1);
51
+ background: rgba(0,153,255,1);
52
+ border-color: rgba(0,153,255,1);
52
53
  }
53
54
  .badge-green,
54
55
  .label-green {
55
- background: rgba(27,192,109,1);
56
- border-color: rgba(27,192,109,1);
56
+ background: rgba(117,210,24,1);
57
+ border-color: rgba(117,210,24,1);
57
58
  }
58
59
  .badge-orange,
59
60
  .label-orange {
60
- background: rgba(255,154,46,1);
61
- border-color: rgba(255,154,46,1);
61
+ background: rgba(255,131,0,1);
62
+ border-color: rgba(255,131,0,1);
62
63
  }
63
64
  .badge-purple,
64
65
  .label-purple {
65
- background: rgba(81,68,95,1);
66
- border-color: rgba(81,68,95,1);
66
+ background: rgba(126,78,194,1);
67
+ border-color: rgba(126,78,194,1);
67
68
  }
68
69
  .badge-red,
69
70
  .label-red {
70
- background: rgba(225,80,80,1);
71
- border-color: rgba(225,80,80,1);
71
+ background: rgba(240,35,17,1);
72
+ border-color: rgba(240,35,17,1);
72
73
  }
73
74
  .badge-smoke,
74
75
  .label-smoke {
@@ -82,8 +83,8 @@
82
83
  }
83
84
  .badge-yellow,
84
85
  .label-yellow {
85
- background: rgba(253,245,98,1);
86
- border-color: rgba(253,245,98,1);
86
+ background: rgba(255,245,0,1);
87
+ border-color: rgba(255,245,0,1);
87
88
  }
88
89
  .badge.badge-outline,
89
90
  .label.label-outline {
@@ -93,18 +94,18 @@
93
94
  .badge-black.badge-outline,
94
95
  .label-black.label-outline { color: rgba(42,44,48,1); }
95
96
  .badge-blue.badge-outline,
96
- .label-blue.label-outline { color: rgba(91,146,250,1); }
97
+ .label-blue.label-outline { color: rgba(0,153,255,1); }
97
98
  .badge-green.badge-outline,
98
- .label-green.label-outline { color: rgba(27,192,109,1); }
99
+ .label-green.label-outline { color: rgba(117,210,24,1); }
99
100
  .badge-orange.badge-outline,
100
- .label-orange.label-outline { color: rgba(255,154,46,1); }
101
+ .label-orange.label-outline { color: rgba(255,131,0,1); }
101
102
  .badge-purple.badge-outline,
102
- .label-purple.label-outline { color: rgba(81,68,95,1); }
103
+ .label-purple.label-outline { color: rgba(126,78,194,1); }
103
104
  .badge-red.badge-outline,
104
- .label-red.label-outline { color: rgba(225,80,80,1); }
105
+ .label-red.label-outline { color: rgba(240,35,17,1); }
105
106
  .badge-smoke.badge-outline,
106
107
  .label-smoke.label-outline { color: rgba(85,94,113,1); }
107
108
  .badge-white.badge-outline,
108
109
  .label-white.label-outline { color: rgba(255,255,255,1); }
109
110
  .badge-yellow.badge-outline,
110
- .label-yellow.label-outline { color: rgba(253,245,98,1); }
111
+ .label-yellow.label-outline { color: rgba(255,245,0,1); }
@@ -18,12 +18,12 @@ a[disabled] {
18
18
  /* # Colors
19
19
  ================================================== */
20
20
  .link-black { color: rgba(42,44,48,1); }
21
- .link-blue { color: rgba(91,146,250,1); }
21
+ .link-blue { color: rgba(0,153,255,1); }
22
22
  .link-gray { color: rgba(136,153,166,1); }
23
- .link-green { color: rgba(27,192,109,1); }
24
- .link-orange { color: rgba(255,154,46,1); }
25
- .text-purple { color: rgba(81,68,95,1); }
26
- .link-red { color: rgba(225,80,80,1); }
23
+ .link-green { color: rgba(117,210,24,1); }
24
+ .link-orange { color: rgba(255,131,0,1); }
25
+ .text-purple { color: rgba(126,78,194,1); }
26
+ .link-red { color: rgba(240,35,17,1); }
27
27
  .link-smoke { color: rgba(85,94,113,1); }
28
28
  .link-white { color: rgba(255,255,255,1); }
29
- .link-yellow { color: rgba(253,245,98,1); }
29
+ .link-yellow { color: rgba(255,245,0,1); }
@@ -23,7 +23,7 @@
23
23
  z-index: 9999;
24
24
  }
25
25
  .loader-bar {
26
- background: rgba(42,44,48,1);
26
+ background: rgba(0,0,0,1);
27
27
  height: 2px;
28
28
  left: 0;
29
29
  pointer-events: none;
@@ -33,7 +33,7 @@
33
33
  z-index: 9999;
34
34
  }
35
35
  .loader-peg {
36
- box-shadow: 0 0 10px rgba(42,44,48,1), 0 0 5px rgba(42,44,48,1);
36
+ box-shadow: 0 0 10px rgba(0,0,0,1), 0 0 5px rgba(0,0,0,1);
37
37
  display: block;
38
38
  height: 100%;
39
39
  opacity: 1;
@@ -56,8 +56,8 @@
56
56
  -webkit-animation: loader-spinner 400ms linear infinite;
57
57
  animation: loader-spinner 400ms linear infinite;
58
58
  border: solid 2px transparent;
59
- border-left-color: rgba(42,44,48,1);
60
- border-top-color: rgba(42,44,48,1);
59
+ border-left-color: rgba(0,0,0,1);
60
+ border-top-color: rgba(0,0,0,1);
61
61
  border-radius: 500px;
62
62
  box-sizing: border-box;
63
63
  height: 18px;