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.
@@ -2,14 +2,15 @@
2
2
  ==================================================
3
3
  # Code
4
4
  # Pre
5
- # Pygments */
5
+ # Pygments
6
+ # Media Queries */
6
7
 
7
8
  /* # Code
8
9
  ================================================== */
9
10
  code {
10
11
  background: $color-haze-light;
11
- border: 1px solid $color-haze;
12
- border-radius: 0;
12
+ border: 1px solid $color-haze-dark;
13
+ border-radius: 2px;
13
14
  color: $color-black;
14
15
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
15
16
  font-size: 12px;
@@ -30,8 +31,8 @@ code {
30
31
  ================================================== */
31
32
  pre {
32
33
  background: $color-haze-light;
33
- border: 1px solid $color-haze;
34
- border-radius: 0;
34
+ border: 1px solid $color-haze-dark;
35
+ border-radius: 2px;
35
36
  color: $color-black;
36
37
  display: block;
37
38
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
@@ -138,4 +139,17 @@ pre {
138
139
  .vc { color: $color-red; } /* Name.Variable.Class */
139
140
  .vg { color: $color-red; } /* Name.Variable.Global */
140
141
  .vi { color: $color-red; } /* Name.Variable.Instance */
141
- .il { color: $color-green; } /* Literal.Number.Integer.Long */
142
+ .il { color: $color-green; } /* Literal.Number.Integer.Long */
143
+
144
+ /* # Media Queries
145
+ ================================================== */
146
+ @media
147
+ only screen and (-webkit-min-device-pixel-ratio: 2),
148
+ only screen and ( min--moz-device-pixel-ratio: 2),
149
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
150
+ only screen and ( min-device-pixel-ratio: 2),
151
+ only screen and ( min-resolution: 192dpi),
152
+ only screen and ( min-resolution: 2dppx) {
153
+ code,
154
+ pre { border-width: 0.5px; }
155
+ }
@@ -1,6 +1,7 @@
1
1
  /* Table of Contents
2
2
  ==================================================
3
3
  # Dropdown
4
+ # Dropup
4
5
  # Submenu */
5
6
 
6
7
  /* # Dropdown
@@ -112,6 +113,40 @@
112
113
  right: 10px;
113
114
  }
114
115
 
116
+ /* # Dropup
117
+ ================================================== */
118
+ .dropup .dropdown-menu {
119
+ top: auto;
120
+ bottom: 100%;
121
+ margin: 0 0 2px 0;
122
+ }
123
+ .dropup .dropdown-menu.dropdown-caret {
124
+ bottom: calc(100% + 5px);
125
+ top: auto;
126
+ }
127
+ .dropup .dropdown-menu.dropdown-caret:before {
128
+ border-bottom: 0;
129
+ border-top: 7px solid $color-haze-dark;
130
+ bottom: -9px;
131
+ left: 9px;
132
+ top: auto;
133
+ }
134
+ .dropup .dropdown-menu.dropdown-caret:after {
135
+ border-bottom: 0;
136
+ border-top: 6px solid $color-haze-dark;
137
+ bottom: -7px;
138
+ left: 10px;
139
+ top: auto;
140
+ }
141
+ .dropup .dropdown-menu.pull-right.dropdown-caret:before {
142
+ left: auto;
143
+ right: 9px;
144
+ }
145
+ .dropup .dropdown-menu.pull-right.dropdown-caret:after {
146
+ left: auto;
147
+ right: 10px;
148
+ }
149
+
115
150
  /* # Submenu
116
151
  ================================================== */
117
152
  .dropdown-submenu { position: relative; }
@@ -1,7 +1,8 @@
1
1
  /* Table of Contents
2
2
  ==================================================
3
3
  # Footer
4
- # Alternate
4
+ # Styles
5
+ # Sizes
5
6
  # Colors
6
7
  # Media Queries */
7
8
 
@@ -16,99 +17,80 @@
16
17
  }
17
18
  .footer {
18
19
  background: $color-white;
19
- border-top: 2px solid $color-haze-light;
20
+ border-top: 1px solid $color-haze;
21
+ background-size: 100% 1px, 100% 1px;
22
+ background-position: top, bottom;
23
+ background-repeat: no-repeat;
20
24
  box-sizing: border-box;
21
- width: 100%;
25
+ color: $color-gray;
22
26
  margin-top: 40px;
23
- padding: 20px 0;
24
- }
25
- .footer-app { width: calc(100% - 280px); }
26
- .footer-brand { float: left; }
27
- .footer-brand > a {
28
- color: $color-gray-light;
29
- font-size: 30px;
30
- text-decoration: none;
27
+ padding: 25px 0 10px 0;
28
+ width: 100%;
31
29
  }
32
- .footer-nav {
33
- float: right;
30
+ .footer-nav,
31
+ .footer-subnav,
32
+ .footer-navicon {
34
33
  list-style: none;
35
- margin: 10px 0 0 0;
34
+ margin: 0 0 10px 0;
36
35
  padding: 0;
37
36
  }
38
- .footer-nav > li {
39
- font-size: 10px;
40
- float: left;
41
- line-height: 10px;
42
- margin-left: 10px;
43
- }
44
- .footer-nav > li:first-child { margin: 0; }
45
- .footer-nav > li > a {
46
- color: $color-gray-light;
47
- font-weight: 500;
48
- text-decoration: none;
49
- text-transform: uppercase;
50
- }
51
- .footer-footnote {
37
+ .footer-nav > li,
38
+ .footer-subnav > li,
39
+ .footer-navicon > li {
52
40
  float: left;
53
- color: $color-gray-light;
41
+ margin: 0 5px;
42
+ }
43
+ .footer-nav > li:first-child,
44
+ .footer-subnav > li:first-child,
45
+ .footer-navicon > li:first-child { margin-left: 0; }
46
+ .footer-nav > li:last-child,
47
+ .footer-subnav > li:last-child,
48
+ .footer-navicon > li:last-child { margin-right: 0; }
49
+ .footer-nav > li,
50
+ .footer-subnav > li {
54
51
  font-size: 10px;
55
52
  line-height: 10px;
56
- margin: 8px 0 0 10px;
53
+ text-transform: uppercase;
57
54
  }
55
+ .footer-nav > li,
56
+ .footer-navicon > li { color: $color-gray-dark; }
57
+ .footer-subnav > li { color: $color-gray-light; }
58
+ .footer-navicon > li {
59
+ font-size: 18px;
60
+ line-height: 18px;
61
+ margin-top: -6px;
62
+ }
63
+ .footer-nav > li > a { font-weight: 500; }
64
+ .footer-nav > li > a,
65
+ .footer-navicon > li > a { color: $color-gray-dark; }
66
+ .footer-subnav > li > a { color: $color-gray-light; }
58
67
 
59
- /* # Alternate
68
+ /* # Styles
60
69
  ================================================== */
61
- .footer-alt { padding: 60px 0; }
62
- .footer-alt .footer-brand {
63
- float: none;
64
- text-align: center;
65
- }
66
- .footer-alt .footer-nav {
67
- float: none;
68
- margin: 0 0 10px 0;
69
- }
70
- .footer-alt .footer-nav > h6 {
71
- border-bottom: 1px solid $color-haze;
72
- letter-spacing: 1px;
73
- margin-bottom: 5px;
74
- padding-bottom: 5px;
75
- text-transform: uppercase;
76
- }
77
- .footer-alt .footer-nav > li {
78
- float: none;
79
- font-size: 14px;
80
- line-height: 22px;
81
- margin: 0;
82
- }
83
- .footer-alt .footer-nav > li > a {
84
- font-weight: normal;
85
- text-transform: none;
86
- }
87
- .footer-alt .footer-footnote {
88
- display: block;
89
- float: none;
90
- margin: 30px 0 15px 0;
91
- text-align: center;
92
- }
70
+ .footer-alt { padding: 60px 0 120px 0; }
71
+
72
+ /* # Sizes
73
+ ================================================== */
74
+ .footer-app { width: calc(100% - 280px); }
93
75
 
94
76
  /* # Colors
95
77
  ================================================== */
96
78
  .footer-dark {
97
79
  background: $color-black;
98
- border-color: rgba(0,0,0,0.2);
99
- }
100
- .footer-dark.footer-alt .footer-nav > h6 {
101
- color: $color-white;
102
- border-color: $color-black-light;
80
+ border-color: $color-black-dark;
103
81
  }
104
- .footer-dark.footer-alt .footer-brand > a,
105
- .footer-dark.footer-alt .footer-nav > li,
106
- .footer-dark.footer-alt .footer-nav > li > a,
107
- .footer-dark.footer-alt .footer-footnote { color: $color-gray; }
108
82
  .footer-light {
109
83
  background: $color-haze-light;
110
84
  border-color: $color-haze-dark;
111
85
  }
86
+ .footer-dark .footer-nav > li,
87
+ .footer-dark .footer-navicon > li,
88
+ .footer-dark .footer-nav > li > a,
89
+ .footer-dark .footer-navicon > li > a { color: $color-white; }
90
+ .footer-dark .footer-subnav > li,
91
+ .footer-dark .footer-subnav > li > a,
92
+ .footer-light .footer-subnav > li,
93
+ .footer-light .footer-subnav > li > a { color: $color-gray; }
112
94
 
113
95
  /* # Media Queries
114
96
  ================================================== */
@@ -121,20 +103,12 @@
121
103
  @media only screen and (max-width: 959px) {
122
104
  .footer-app { width: 100%; }
123
105
  }
124
- @media only screen and (max-width: 767px) {
125
- .footer-alt .footer-nav {
126
- margin-bottom: 5px;
127
- text-align: center;
128
- }
129
- .footer-alt .footer-nav > li {
130
- display: inline-block;
131
- font-size: 10px;
132
- line-height: 10px;
133
- margin-right: 10px;
134
- }
135
- .footer-alt .footer-nav > li:last-child { margin: 0; }
136
- .footer-alt .footer-nav > li > a {
137
- font-weight: bold;
138
- text-transform: uppercase;
139
- }
106
+ @media
107
+ only screen and (-webkit-min-device-pixel-ratio: 2),
108
+ only screen and ( min--moz-device-pixel-ratio: 2),
109
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
110
+ only screen and ( min-device-pixel-ratio: 2),
111
+ only screen and ( min-resolution: 192dpi),
112
+ only screen and ( min-resolution: 2dppx) {
113
+ .footer { border-width: 0.5px; }
140
114
  }
@@ -3,7 +3,6 @@
3
3
  # Form
4
4
  # Components
5
5
  # Styles
6
- # Sizes
7
6
  # Media Queries */
8
7
 
9
8
  /* # Form
@@ -12,7 +11,7 @@ fieldset { border: 0; }
12
11
  legend {
13
12
  border: 0;
14
13
  border-bottom: 1px solid $color-haze;
15
- color: $color-gray-dark;
14
+ color: $color-black;
16
15
  display: block;
17
16
  font-size: 16px;
18
17
  font-weight: bold;
@@ -52,7 +51,7 @@ input[type="color"],
52
51
  appearance: none;
53
52
  background: $color-white;
54
53
  border: 1px solid $color-haze;
55
- border-radius: 0;
54
+ border-radius: 2px;
56
55
  box-sizing: border-box;
57
56
  color: $color-black;
58
57
  display: block;
@@ -190,12 +189,16 @@ select.form-input-initial-width {
190
189
  .form-error-messages > h4 {
191
190
  background: $color-haze-light;
192
191
  border: 1px solid $color-haze;
192
+ border-top-left-radius: 3px;
193
+ border-top-right-radius: 3px;
193
194
  margin: 0;
194
195
  padding: 5px 10px;
195
196
  }
196
197
  .form-error-messages > ul {
197
198
  border: 1px solid $color-haze;
198
199
  border-top: 0;
200
+ border-bottom-left-radius: 3px;
201
+ border-bottom-right-radius: 3px;
199
202
  }
200
203
  .form-error-messages > ul > li {
201
204
  display: block;
@@ -205,6 +208,11 @@ select.form-input-initial-width {
205
208
  .form-error-messages > ul > li:last-child { padding-bottom: 10px; }
206
209
  .form-textarea-small { height: 80px; }
207
210
  .form-textarea-large { height: 200px; }
211
+ .form-file-text,
212
+ .form-input-group > input {
213
+ border-bottom-left-radius: 0 !important;
214
+ border-top-left-radius: 0 !important;
215
+ }
208
216
  .form-file-input {
209
217
  height: 0;
210
218
  margin: 0;
@@ -233,6 +241,8 @@ select.form-input-initial-width {
233
241
  .form-file-group > input { margin: 0; }
234
242
  .form-input-group-addon,
235
243
  .form-file-group-addon {
244
+ border-bottom-left-radius: 2px;
245
+ border-top-left-radius: 2px;
236
246
  box-sizing: border-box;
237
247
  line-height: 0;
238
248
  text-align: center;
@@ -249,13 +259,15 @@ select.form-input-initial-width {
249
259
  font-weight: normal;
250
260
  padding: 0 13px;
251
261
  }
252
- .form-file-group-addon { padding: 0; }
253
262
  .form-file-group-button {
254
263
  border-color: $color-haze;
264
+ border-bottom-right-radius: 0;
265
+ border-top-right-radius: 0;
255
266
  margin-right: -1px;
256
267
  padding-bottom: 14px;
257
268
  padding-top: 14px;
258
269
  }
270
+ .form-file-group-addon { padding: 0; }
259
271
  .form-input-group-addon:first-child,
260
272
  .form-file-group-addon:first-child,
261
273
  .form-file-group-addon:first-child > .form-file-group-button { border-right: 0; }
@@ -310,6 +322,8 @@ select.form-input-initial-width {
310
322
  background: rgba(0,0,0,0);
311
323
  border: 1px solid $color-haze;
312
324
  border-left: 0;
325
+ border-bottom-right-radius: 2px;
326
+ border-top-right-radius: 2px;
313
327
  bottom: 0;
314
328
  right: 0;
315
329
  top: 0;
@@ -335,33 +349,26 @@ select.form-input-initial-width {
335
349
 
336
350
  /* # Styles
337
351
  ================================================== */
338
- .form-inline {
339
- clear: both;
340
- margin-left: -5px;
341
- }
342
- .form-inline > input,
343
- .form-inline > textarea,
344
- .form-inline > select {
345
- display: inline-block;
346
- float: left;
347
- margin: 0 0 0 5px;
348
- }
352
+ .form-inline { clear: both; }
349
353
  .form-inline > input[type="submit"],
350
354
  .form-inline > input[type="reset"],
351
355
  .form-inline > input[type="button"] {
356
+ float: left;
352
357
  padding-bottom: 14px;
353
358
  padding-top: 14px;
354
359
  }
355
-
356
- /* # Sizes
357
- ================================================== */
358
- .form-input-large { width: 300px !important; }
359
- .form-input-medium { width: 150px !important; }
360
- .form-input-small { width: 75px !important; }
361
- .form-input-mini { width: 50px !important; }
362
- .form-inline.form-inline-alt > input,
363
- .form-inline.form-inline-alt > textarea,
364
- .form-inline.form-inline-alt > select {
360
+ .form-inline-input {
361
+ float: left;
362
+ margin: -2px 5px 0 0;
363
+ width: 150px;
364
+ }
365
+ .form-inline-input-large { width: 300px; }
366
+ .form-inline-input-medium { width: 200px; }
367
+ .form-inline-input-small { width: 100px; }
368
+ .form-inline-input-mini { width: 50px; }
369
+ .form-inline.form-inline-alt input,
370
+ .form-inline.form-inline-alt textarea,
371
+ .form-inline.form-inline-alt select {
365
372
  font-size: 12px;
366
373
  line-height: 14px;
367
374
  padding-bottom: 6px;
@@ -375,10 +382,28 @@ select.form-input-initial-width {
375
382
  padding-bottom: 8px;
376
383
  padding-top: 8px;
377
384
  }
385
+ .form-inline.form-inline-alt .form-select::after {
386
+ font-size: 14px;
387
+ height: 14px;
388
+ margin-top: -7px;
389
+ right: 12px;
390
+ }
391
+ .form-inline.form-inline-alt .form-select::before { width: 31px; }
378
392
 
379
393
  /* # Media Queries
380
394
  ================================================== */
381
395
  @media only screen and (max-width: 767px) {
382
396
  .form-button-inline { margin-top: 15px; }
383
397
  .form-text-inline { margin-top: 0; }
398
+ }
399
+ @media
400
+ only screen and (-webkit-min-device-pixel-ratio: 2),
401
+ only screen and ( min--moz-device-pixel-ratio: 2),
402
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
403
+ only screen and ( min-device-pixel-ratio: 2),
404
+ only screen and ( min-resolution: 192dpi),
405
+ only screen and ( min-resolution: 2dppx) {
406
+ legend,
407
+ .form-header,
408
+ .form-footer { border-width: 0.5px; }
384
409
  }