active_frontend 1.0.11 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (54) hide show
  1. checksums.yaml +4 -4
  2. data/lib/active_frontend/version.rb +1 -1
  3. data/vendor/assets/javascripts/affix.js +2 -2
  4. data/vendor/assets/javascripts/alert.js +1 -1
  5. data/vendor/assets/javascripts/button.js +1 -1
  6. data/vendor/assets/javascripts/carousel.js +1 -1
  7. data/vendor/assets/javascripts/collapse.js +2 -2
  8. data/vendor/assets/javascripts/dropdown.js +8 -4
  9. data/vendor/assets/javascripts/loader.js +361 -0
  10. data/vendor/assets/javascripts/map.js +8 -0
  11. data/vendor/assets/javascripts/popover.js +2 -2
  12. data/vendor/assets/javascripts/scrollspy.js +2 -2
  13. data/vendor/assets/javascripts/tab.js +1 -1
  14. data/vendor/assets/javascripts/tooltip.js +3 -3
  15. data/vendor/assets/stylesheets/affix.scss +4 -1
  16. data/vendor/assets/stylesheets/alert.scss +23 -8
  17. data/vendor/assets/stylesheets/animation.scss +185 -185
  18. data/vendor/assets/stylesheets/aside.scss +13 -13
  19. data/vendor/assets/stylesheets/breadcrumb.scss +2 -2
  20. data/vendor/assets/stylesheets/button.scss +102 -239
  21. data/vendor/assets/stylesheets/canvas.scss +77 -0
  22. data/vendor/assets/stylesheets/carousel.scss +3 -3
  23. data/vendor/assets/stylesheets/code.scss +48 -54
  24. data/vendor/assets/stylesheets/collapse.scss +2 -2
  25. data/vendor/assets/stylesheets/datepicker.scss +17 -17
  26. data/vendor/assets/stylesheets/dropdown.scss +11 -11
  27. data/vendor/assets/stylesheets/footer.scss +88 -20
  28. data/vendor/assets/stylesheets/form.scss +25 -59
  29. data/vendor/assets/stylesheets/grid.scss +137 -168
  30. data/vendor/assets/stylesheets/header.scss +61 -98
  31. data/vendor/assets/stylesheets/image.scss +24 -269
  32. data/vendor/assets/stylesheets/label_and_badge.scss +50 -49
  33. data/vendor/assets/stylesheets/link.scss +11 -7
  34. data/vendor/assets/stylesheets/loader.scss +56 -0
  35. data/vendor/assets/stylesheets/map.scss +1 -1
  36. data/vendor/assets/stylesheets/modal.scss +13 -13
  37. data/vendor/assets/stylesheets/nav_and_tab.scss +12 -12
  38. data/vendor/assets/stylesheets/pagination.scss +3 -3
  39. data/vendor/assets/stylesheets/panel.scss +2 -2
  40. data/vendor/assets/stylesheets/placeholder.scss +1 -1
  41. data/vendor/assets/stylesheets/popover.scss +12 -12
  42. data/vendor/assets/stylesheets/progress.scss +5 -5
  43. data/vendor/assets/stylesheets/reset.scss +10 -9
  44. data/vendor/assets/stylesheets/sidebar.scss +65 -0
  45. data/vendor/assets/stylesheets/spinner.scss +100 -112
  46. data/vendor/assets/stylesheets/swoggle.scss +29 -26
  47. data/vendor/assets/stylesheets/table.scss +7 -7
  48. data/vendor/assets/stylesheets/timepicker.scss +10 -10
  49. data/vendor/assets/stylesheets/tooltip.scss +9 -9
  50. data/vendor/assets/stylesheets/transition.scss +1 -1
  51. data/vendor/assets/stylesheets/trunk.scss +19 -24
  52. data/vendor/assets/stylesheets/typeahead.scss +1 -1
  53. data/vendor/assets/stylesheets/typography.scss +7 -7
  54. metadata +6 -2
@@ -0,0 +1,77 @@
1
+ /* Table of Contents
2
+ ==================================================
3
+ # Canvas
4
+ # Media Queries */
5
+
6
+ /* # Canvas
7
+ ================================================== */
8
+ .canvas {
9
+ height: 100%;
10
+ min-height: 100%;
11
+ }
12
+ .canvas-content,
13
+ .canvas-sidebar {
14
+ box-sizing: border-box;
15
+ display: block;
16
+ float: left;
17
+ height: 100%;
18
+ min-height: 100%;
19
+ }
20
+ .canvas-content {
21
+ padding: 30px 0;
22
+ max-width: calc(100% - 280px);
23
+ width: calc(100% - 280px);
24
+ }
25
+ .canvas-with-header > .canvas-content,
26
+ .canvas-with-header > .canvas-sidebar,
27
+ .canvas-with-header-and-footer > .canvas-content,
28
+ .canvas-with-header-and-footer > .canvas-sidebar { margin-top: 60px; }
29
+ .canvas-with-footer > .canvas-content,
30
+ .canvas-with-header-and-footer > .canvas-content { padding-bottom: 90px; }
31
+ .canvas-sidebar {
32
+ max-width: 280px;
33
+ width: 280px;
34
+ }
35
+ .canvas-with-header .sidebar,
36
+ .canvas-with-footer .sidebar {
37
+ height: calc(100% - 60px);
38
+ max-height: calc(100% - 60px);
39
+ }
40
+ .canvas-with-header-and-footer .sidebar {
41
+ height: calc(100% - 120px);
42
+ max-height: calc(100% - 120px);
43
+ }
44
+
45
+ /* # Media Queries
46
+ ================================================== */
47
+ @media only screen and (max-width: 1199px) {
48
+ .canvas-content {
49
+ max-width: calc(100% - 220px);
50
+ width: calc(100% - 220px);
51
+ }
52
+ .canvas-sidebar {
53
+ max-width: 220px;
54
+ width: 220px;
55
+ }
56
+ }
57
+ @media only screen and (max-width: 767px) {
58
+ .canvas-with-header > .canvas-content,
59
+ .canvas-with-header > .canvas-sidebar,
60
+ .canvas-with-header-and-footer > .canvas-content,
61
+ .canvas-with-header-and-footer > .canvas-sidebar { margin-top: 50px; }
62
+ .canvas-with-footer > .canvas-content,
63
+ .canvas-with-header-and-footer > .canvas-content { padding-bottom: 80px; }
64
+ .canvas-with-header .sidebar,
65
+ .canvas-with-footer .sidebar {
66
+ height: calc(100% - 50px);
67
+ max-height: calc(100% - 50px);
68
+ }
69
+ .canvas-with-header-and-footer .sidebar {
70
+ height: calc(100% - 100px);
71
+ max-height: calc(100% - 100px);
72
+ }
73
+ .canvas-content {
74
+ max-width: 100%;
75
+ width: 100%;
76
+ }
77
+ }
@@ -15,7 +15,7 @@
15
15
  display: none;
16
16
  position: relative;
17
17
  -webkit-transition: 0.6s ease-in-out left;
18
- transition: 0.6s ease-in-out left;
18
+ transition: 0.6s ease-in-out left;
19
19
  }
20
20
  .carousel-inner > .item > img,
21
21
  .carousel-inner > .item > a > img {
@@ -105,7 +105,7 @@
105
105
  display: inline-block;
106
106
  background: rgba(0,0,0,0);
107
107
  border-radius: 10px;
108
- border: 1px solid rgba(255,255,255,1);
108
+ border: 1px solid rgba(255,255,255,1);
109
109
  cursor: pointer;
110
110
  height: 10px;
111
111
  margin: 1px;
@@ -123,7 +123,7 @@
123
123
  color: rgba(255,255,255,1);
124
124
  left: 15%;
125
125
  padding-bottom: 20px;
126
- padding-top: 20px;
126
+ padding-top: 20px;
127
127
  position: absolute;
128
128
  right: 15%;
129
129
  text-align: center;
@@ -51,31 +51,31 @@ pre {
51
51
  font-style: italic;
52
52
  } /* Comment */
53
53
  .err {
54
- color: rgba(218,79,46,1);
54
+ color: rgba(255,59,48,1);
55
55
  background: rgba(43,50,53,1);
56
56
  } /* Error */
57
- .k { color: rgba(15,135,226,1); } /* Keyword */
57
+ .k { color: rgba(0,132,255,1); } /* Keyword */
58
58
  .cm {
59
59
  color: rgba(136,153,166,1);
60
60
  font-style: italic;
61
61
  } /* Comment.Multiline */
62
- .cp { color: rgba(112,169,13,1); } /* Comment.Preproc */
62
+ .cp { color: rgba(68,205,1,1); } /* Comment.Preproc */
63
63
  .c1 {
64
64
  color: rgba(136,153,166,1);
65
65
  font-style: italic;
66
66
  } /* Comment.Single */
67
67
  .cs {
68
- color: rgba(15,135,226,1);
68
+ color: rgba(0,132,255,1);
69
69
  font-style: italic;
70
70
  } /* Comment.Special */
71
- .gd { color: rgba(218,79,46,1); } /* Generic.Deleted */
71
+ .gd { color: rgba(255,59,48,1); } /* Generic.Deleted */
72
72
  .ge { font-style: italic; } /* Generic.Emph */
73
- .gr { color: rgba(218,79,46,1) } /* Generic.Error */
73
+ .gr { color: rgba(255,59,48,1) } /* Generic.Error */
74
74
  .gh {
75
- color: rgba(15,135,226,1);
75
+ color: rgba(0,132,255,1);
76
76
  font-weight: bold;
77
77
  } /* Generic.Heading */
78
- .gi { color: rgba(112,169,13,1); } /* Generic.Inserted */
78
+ .gi { color: rgba(68,205,1,1); } /* Generic.Inserted */
79
79
  .go { color: rgba(136,153,166,1); } /* Generic.Output */
80
80
  .gp { color: rgba(43,50,53,1); } /* Generic.Prompt */
81
81
  .gs { font-weight: bold; } /* Generic.Strong */
@@ -83,57 +83,51 @@ pre {
83
83
  color: rgba(43,50,53,1);
84
84
  font-weight: bold;
85
85
  } /* Generic.Subheading */
86
- .gt { color: rgba(218,79,46,1); } /* Generic.Traceback */
87
- .kc { color: rgba(15,135,226,1); } /* Keyword.Constant */
88
- .kd { color: rgba(15,135,226,1); } /* Keyword.Declaration */
89
- .kn { color: rgba(15,135,226,1); } /* Keyword.Namespace */
90
- .kp { color: rgba(15,135,226,1); } /* Keyword.Pseudo */
91
- .kr { color: rgba(15,135,226,1); } /* Keyword.Reserved */
92
- .kt { color: rgba(112,169,13,1); } /* Keyword.Type */
93
- .m { color: rgba(112,169,13,1); } /* Literal.Number */
94
- .s { color: rgba(15,135,226,1); } /* Literal.String */
95
- .sa { color: rgba(112,169,13,1); } /* Literal.String.Alternate */
96
- .na { color: rgba(15,135,226,1); } /* Name.Attribute */
97
- .nb { color: rgba(112,169,13,1); } /* Name.Builtin */
98
- .nc {
99
- color: rgba(112,169,13,1);
100
- text-decoration: underline;
101
- } /* Name.Class */
102
- .no { color: rgba(218,79,46,1); } /* Name.Constant */
86
+ .gt { color: rgba(255,59,48,1); } /* Generic.Traceback */
87
+ .kc { color: rgba(0,132,255,1); } /* Keyword.Constant */
88
+ .kd { color: rgba(0,132,255,1); } /* Keyword.Declaration */
89
+ .kn { color: rgba(0,132,255,1); } /* Keyword.Namespace */
90
+ .kp { color: rgba(0,132,255,1); } /* Keyword.Pseudo */
91
+ .kr { color: rgba(0,132,255,1); } /* Keyword.Reserved */
92
+ .kt { color: rgba(68,205,1,1); } /* Keyword.Type */
93
+ .m { color: rgba(68,205,1,1); } /* Literal.Number */
94
+ .s { color: rgba(0,132,255,1); } /* Literal.String */
95
+ .sa { color: rgba(68,205,1,1); } /* Literal.String.Alternate */
96
+ .na { color: rgba(0,132,255,1); } /* Name.Attribute */
97
+ .nb { color: rgba(68,205,1,1); } /* Name.Builtin */
98
+ .nc { color: rgba(68,205,1,1); } /* Name.Class */
99
+ .no { color: rgba(255,59,48,1); } /* Name.Constant */
103
100
  .nd { color: rgba(136,153,166,1); } /* Name.Decorator */
104
101
  .ni {
105
- color: rgba(218,79,46,1);
102
+ color: rgba(255,59,48,1);
106
103
  font-weight: bold;
107
104
  } /* Name.Entity */
108
- .nf { color: rgba(112,169,13,1); } /* Name.Function */
109
- .nn {
110
- color: rgba(112,169,13,1);
111
- text-decoration: underline;
112
- } /* Name.Namespace */
105
+ .nf { color: rgba(68,205,1,1); } /* Name.Function */
106
+ .nn { color: rgba(68,205,1,1); } /* Name.Namespace */
113
107
  .nt {
114
- color: rgba(15,135,226,1);
108
+ color: rgba(0,132,255,1);
115
109
  font-weight: bold;
116
110
  } /* Name.Tag */
117
- .nv { color: rgba(218,79,46,1); } /* Name.Variable */
118
- .ow { color: rgba(15,135,226,1); } /* Operator.Word */
111
+ .nv { color: rgba(255,59,48,1); } /* Name.Variable */
112
+ .ow { color: rgba(0,132,255,1); } /* Operator.Word */
119
113
  .w { color: rgba(136,153,166,1); } /* Text.Whitespace */
120
- .mf { color: rgba(112,169,13,1); } /* Literal.Number.Float */
121
- .mh { color: rgba(112,169,13,1); } /* Literal.Number.Hex */
122
- .mi { color: rgba(112,169,13,1); } /* Literal.Number.Integer */
123
- .mo { color: rgba(112,169,13,1); } /* Literal.Number.Oct */
124
- .sb { color: rgba(15,135,226,1); } /* Literal.String.Backtick */
125
- .sc { color: rgba(15,135,226,1); } /* Literal.String.Char */
126
- .sd { color: rgba(15,135,226,1); } /* Literal.String.Doc */
127
- .s2 { color: rgba(15,135,226,1); } /* Literal.String.Double */
128
- .se { color: rgba(15,135,226,1); } /* Literal.String.Escape */
129
- .sh { color: rgba(15,135,226,1); } /* Literal.String.Heredoc */
130
- .si { color: rgba(15,135,226,1); } /* Literal.String.Interpol */
131
- .sx { color: rgba(15,135,226,1); } /* Literal.String.Other */
132
- .sr { color: rgba(112,169,13,1); } /* Literal.String.Regex */
133
- .s1 { color: rgba(15,135,226,1); } /* Literal.String.Single */
134
- .ss { color: rgba(15,135,226,1); } /* Literal.String.Symbol */
135
- .bp { color: rgba(112,169,13,1); } /* Name.Builtin.Pseudo */
136
- .vc { color: rgba(218,79,46,1); } /* Name.Variable.Class */
137
- .vg { color: rgba(218,79,46,1); } /* Name.Variable.Global */
138
- .vi { color: rgba(218,79,46,1); } /* Name.Variable.Instance */
139
- .il { color: rgba(112,169,13,1); } /* Literal.Number.Integer.Long */
114
+ .mf { color: rgba(68,205,1,1); } /* Literal.Number.Float */
115
+ .mh { color: rgba(68,205,1,1); } /* Literal.Number.Hex */
116
+ .mi { color: rgba(68,205,1,1); } /* Literal.Number.Integer */
117
+ .mo { color: rgba(68,205,1,1); } /* Literal.Number.Oct */
118
+ .sb { color: rgba(0,132,255,1); } /* Literal.String.Backtick */
119
+ .sc { color: rgba(0,132,255,1); } /* Literal.String.Char */
120
+ .sd { color: rgba(0,132,255,1); } /* Literal.String.Doc */
121
+ .s2 { color: rgba(0,132,255,1); } /* Literal.String.Double */
122
+ .se { color: rgba(0,132,255,1); } /* Literal.String.Escape */
123
+ .sh { color: rgba(0,132,255,1); } /* Literal.String.Heredoc */
124
+ .si { color: rgba(0,132,255,1); } /* Literal.String.Interpol */
125
+ .sx { color: rgba(0,132,255,1); } /* Literal.String.Other */
126
+ .sr { color: rgba(68,205,1,1); } /* Literal.String.Regex */
127
+ .s1 { color: rgba(0,132,255,1); } /* Literal.String.Single */
128
+ .ss { color: rgba(0,132,255,1); } /* Literal.String.Symbol */
129
+ .bp { color: rgba(68,205,1,1); } /* Name.Builtin.Pseudo */
130
+ .vc { color: rgba(255,59,48,1); } /* Name.Variable.Class */
131
+ .vg { color: rgba(255,59,48,1); } /* Name.Variable.Global */
132
+ .vi { color: rgba(255,59,48,1); } /* Name.Variable.Instance */
133
+ .il { color: rgba(68,205,1,1); } /* Literal.Number.Integer.Long */
@@ -4,12 +4,12 @@
4
4
 
5
5
  /* # Collapse
6
6
  ================================================== */
7
- .collapse { display: none; }
7
+ .collapse { display: none; }
8
8
  .collapse.in { display: block; }
9
9
  .collapsing {
10
10
  position: relative;
11
11
  height: 0;
12
12
  overflow: hidden;
13
13
  -webkit-transition: height 0.35s ease;
14
- transition: height 0.35s ease;
14
+ transition: height 0.35s ease;
15
15
  }
@@ -12,17 +12,17 @@
12
12
  z-index: 1060;
13
13
  }
14
14
  .datepicker:before {
15
- border-bottom: 7px solid rgba(245,248,250,1);
16
- border-right: 7px solid transparent;
17
- border-left: 7px solid transparent;
15
+ border-bottom: 7px solid rgba(56,67,81,1);
16
+ border-right: 7px solid transparent;
17
+ border-left: 7px solid transparent;
18
18
  content: '';
19
19
  display: inline-block;
20
20
  position: absolute;
21
21
  }
22
22
  .datepicker:after {
23
- border-bottom: 6px solid rgba(245,248,250,1);
24
- border-right: 6px solid transparent;
25
- border-left: 6px solid transparent;
23
+ border-bottom: 6px solid rgba(56,67,81,1);
24
+ border-right: 6px solid transparent;
25
+ border-left: 6px solid transparent;
26
26
  content: '';
27
27
  display: inline-block;
28
28
  position: absolute;
@@ -36,15 +36,15 @@
36
36
  .datepicker.datepicker-orient-bottom:before {
37
37
  bottom: -7px;
38
38
  border-bottom: 0;
39
- border-top: 7px solid rgba(245,248,250,1);
39
+ border-top: 7px solid rgba(56,67,81,1);
40
40
  }
41
41
  .datepicker.datepicker-orient-bottom:after {
42
42
  bottom: -6px;
43
43
  border-bottom: 0;
44
- border-top: 6px rgba(245,248,250,1);
44
+ border-top: 6px rgba(56,67,81,1);
45
45
  }
46
46
  .dow {
47
- color: rgba(136,153,166,1);
47
+ color: rgba(255,255,255,1);
48
48
  font-weight: bold;
49
49
  }
50
50
  .datepicker > div { display: none; }
@@ -52,7 +52,7 @@
52
52
  margin: 0;
53
53
  -webkit-touch-callout: none;
54
54
  -webkit-user-select: none;
55
- user-select: none;
55
+ user-select: none;
56
56
  width: 100%;
57
57
  }
58
58
  .datepicker th {
@@ -68,8 +68,8 @@
68
68
  width: 20px;
69
69
  }
70
70
  .datepicker td.day:hover {
71
- background: rgba(15,135,226,1);
72
- border-radius: 500px;
71
+ background: rgba(0,132,255,1);
72
+ border-radius: 2px;
73
73
  color: rgba(255,255,255,1);
74
74
  cursor: pointer;
75
75
  }
@@ -89,8 +89,8 @@
89
89
  .datepicker td.active:hover.disabled,
90
90
  .datepicker td.active[disabled],
91
91
  .datepicker td.active:hover[disabled] {
92
- background: rgba(112,169,13,1);
93
- border-radius: 500px;
92
+ background: rgba(68,205,1,1);
93
+ border-radius: 2px;
94
94
  color: rgba(255,255,255,1);
95
95
  }
96
96
  .datepicker td span {
@@ -103,7 +103,7 @@
103
103
  width: 46px;
104
104
  }
105
105
  .datepicker td span:hover {
106
- background: rgba(15,135,226,1);
106
+ background: rgba(0,132,255,1);
107
107
  color: rgba(255,255,255,1);
108
108
  cursor: pointer;
109
109
  }
@@ -114,7 +114,7 @@
114
114
  .datepicker td span.active.active,
115
115
  .datepicker td span.active.disabled,
116
116
  .datepicker td span.active[disabled] {
117
- background: rgba(112,169,13,1);
117
+ background: rgba(68,205,1,1);
118
118
  color: rgba(255,255,255,1);
119
119
  }
120
120
  .datepicker th.switch {
@@ -124,7 +124,7 @@
124
124
  .datepicker th.next,
125
125
  .datepicker th.prev { font-size: 17px; }
126
126
  .datepicker thead tr:first-child th:hover {
127
- background: rgba(15,135,226,1);
127
+ background: rgba(0,132,255,1);
128
128
  border-radius: 2px;
129
129
  color: rgba(255,255,255,1);
130
130
  cursor: pointer;
@@ -10,17 +10,17 @@
10
10
  .dropdown-toggle:active,
11
11
  .open .dropdown-toggle { outline: 0; }
12
12
  .dropdown-menu {
13
- background: rgba(245,248,250,1);
13
+ background: rgba(56,67,81,1);
14
14
  background-clip: padding-box;
15
- border: 1px solid rgba(225,232,237,1);
15
+ border: 1px solid rgba(26,37,51,1);
16
16
  border-radius: 4px;
17
- box-shadow: 0 0 3px rgba(225,232,237,1);
17
+ box-shadow: 0 0 3px rgba(56,67,81,0.75);
18
18
  box-sizing: border-box;
19
- color: rgba(43,50,53,1);
19
+ color: rgba(255,255,255,1);
20
20
  display: none;
21
21
  float: left;
22
22
  font-weight: bold;
23
- font-size: 12px;
23
+ font-size: 12px;
24
24
  line-height: 20px;
25
25
  list-style: none;
26
26
  margin: 2px 0 0 0;
@@ -36,14 +36,14 @@
36
36
  right: 0;
37
37
  }
38
38
  .dropdown-menu > .divider {
39
- background: rgba(225,232,237,1);
39
+ background: rgba(26,37,51,1);
40
40
  height: 1px;
41
41
  margin: 5px 0px;
42
42
  overflow: hidden;
43
43
  }
44
44
  .dropdown-menu > li > a {
45
45
  clear: both;
46
- color: rgba(43,50,53,1);
46
+ color: rgba(255,255,255,1);
47
47
  cursor: pointer;
48
48
  display: block;
49
49
  padding: 5px 15px;
@@ -53,11 +53,11 @@
53
53
  .dropdown-menu > li > a:hover,
54
54
  .dropdown-menu > li > a:focus,
55
55
  .dropdown-submenu:hover > a,
56
- .dropdown-submenu:focus > a { color: rgba(15,135,226,1); }
56
+ .dropdown-submenu:focus > a { color: rgba(0,132,255,1); }
57
57
  .dropdown-menu > li > a:active,
58
58
  .dropdown-menu > li > a.active,
59
59
  .dropdown-submenu:active > a,
60
- .dropdown-submenu.active > a { color: rgba(112,169,13,1); }
60
+ .dropdown-submenu.active > a { color: rgba(68,205,1,1); }
61
61
  .open > .dropdown-menu { display: block; }
62
62
  .pull-right > .dropdown-menu {
63
63
  left: auto;
@@ -74,7 +74,7 @@
74
74
  .dropdown-submenu > .dropdown-menu {
75
75
  left: 100%;
76
76
  margin-left: -1px;
77
- margin-top: -6px;
77
+ margin-top: -6px;
78
78
  top: 0;
79
79
  }
80
80
  .dropdown-submenu:hover > .dropdown-menu { display: block; }
@@ -84,7 +84,7 @@
84
84
  float: right;
85
85
  height: 0;
86
86
  margin-right: -10px;
87
- margin-top: 5px;
87
+ margin-top: 5px;
88
88
  width: 0;
89
89
  }
90
90
  .dropdown-submenu.pull-left { float: none; }
@@ -1,20 +1,27 @@
1
1
  /* Table of Contents
2
2
  ==================================================
3
3
  # Footer
4
- # Alternate */
4
+ # Application */
5
5
 
6
6
  /* # Footer
7
7
  ================================================== */
8
+ .footer-fixed {
9
+ bottom: 0;
10
+ left: 0;
11
+ position: fixed;
12
+ right: 0;
13
+ z-index: 1030;
14
+ }
8
15
  .footer {
9
16
  background: rgba(255,255,255,1);
10
17
  border-top: 1px solid rgba(225,232,237,1);
11
- box-shadow: inset 0 1px 3px rgba(225,232,237,1);
12
- color: rgba(136,153,166,1);
13
- margin-top: 80px;
14
- padding: 50px 0;
18
+ box-sizing: border-box;
19
+ width: 100%;
20
+ padding: 30px 0;
15
21
  }
22
+ .footer-alt { box-shadow: inset 0 1px 3px rgba(225,232,237,1); }
16
23
  .footer-brand {
17
- margin: -79px 0 30px 0;
24
+ margin: -59px 0 30px 0;
18
25
  text-align: center;
19
26
  }
20
27
  .footer-brand > a {
@@ -28,7 +35,7 @@
28
35
  padding: 5px 0 2px 0;
29
36
  opacity: 1;
30
37
  text-decoration: none;
31
- text-align: center;
38
+ text-align: center;
32
39
  vertical-align: middle;
33
40
  width: 50px;
34
41
  }
@@ -40,29 +47,90 @@
40
47
  .footer-nav {
41
48
  font-size: 14px;
42
49
  line-height: 22px;
43
- list-style-type: none;
44
- margin: 0;
50
+ list-style: none;
51
+ margin: 0 0 20px 0;
45
52
  padding: 0;
46
53
  }
47
54
  .footer-nav > li > a {
48
55
  color: rgba(136,153,166,1);
49
56
  text-decoration: none;
50
57
  }
51
- .footer-nav > li > a:hover { color: rgba(102,117,127,1); }
52
58
  .footer-footnote {
53
59
  display: block;
54
- margin-top: 30px;
60
+ color: rgba(136,153,166,1);
61
+ font-size: 10px;
55
62
  text-align: center;
56
63
  }
57
64
 
58
- /* # Alternate
65
+ /* # Application
59
66
  ================================================== */
60
- .footer-alt {
61
- background: transparent;
62
- border-color: transparent;
63
- box-shadow: none;
64
- }
65
- .footer-alt .footer-brand > a {
66
- background: transparent;
67
- box-shadow: none;
67
+ .footer-app {
68
+ box-shadow: 0 -1px 3px rgba(225,232,237,1);
69
+ height: 60px;
70
+ padding: 0 20px;
71
+ }
72
+ .footer-app-btn,
73
+ .footer-app-btn.disabled,
74
+ .footer-app-btn[disabled] {
75
+ background: rgba(255,255,255,1);
76
+ color: rgba(43,50,53,1);
77
+ display: block;
78
+ float: left;
79
+ font-size: 12px;
80
+ letter-spacing: 1px;
81
+ line-height: 13px;
82
+ padding: 23px 0;
83
+ text-align: center;
84
+ text-transform: uppercase;
85
+ width: 200px;
86
+ }
87
+ .footer-app-btn:first-child {
88
+ border-right: 1px solid rgba(230,237,242,1);
89
+ margin-left: -30px;
90
+ }
91
+ .footer-app-btn.disabled,
92
+ .footer-app-btn[disabled] {
93
+ color: rgba(136,153,166,1);
94
+ cursor: not-allowed;
95
+ pointer-events: none;
96
+ }
97
+ .footer-app-btn:last-child {
98
+ border-left: 1px solid rgba(230,237,242,1);
99
+ margin-right: -30px;
100
+ }
101
+ .footer-app-content > .footer-footnote { margin-top: 22px; }
102
+ .footer-app-content-with-btn {
103
+ float: left;
104
+ width: calc(100% - 342px);
105
+ }
106
+ .footer-app-navicon {
107
+ border-collapse: separate;
108
+ display: table;
109
+ table-layout: fixed;
110
+ width: 100%;
111
+ }
112
+ .footer-app-navicon > a {
113
+ color: rgba(136,153,166,1);
114
+ display: table-cell;
115
+ float: none;
116
+ font-size: 27px;
117
+ padding: 10px 0;
118
+ text-align: center;
119
+ width: 1%;
120
+ }
121
+ .footer-app-navicon > a.active { color: rgba(0,132,255,1); }
122
+
123
+ /* # Media Queries
124
+ ================================================== */
125
+ @media only screen and (min-width: 768px) and (max-width: 959px) {
126
+ .footer-app-content-with-btn { width: calc(100% - 302px); }
127
+ .footer-app-btn,
128
+ .footer-app-btn.disabled,
129
+ .footer-app-btn[disabled] { width: 180px; }
130
+ }
131
+ @media only screen and (max-width: 767px) {
132
+ .footer-app {
133
+ height: 50px;
134
+ padding: 0;
135
+ }
68
136
  }