active_frontend 12.3.0 → 12.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 46f0d1ff12912c504835664509225a2d3ea926c9
-  data.tar.gz: 89a6501189dd5b9e91b1786c93b8e01c65213209
+  metadata.gz: ad50b899b412ba2e5bc078ff4391f04064ba14d5
+  data.tar.gz: 97e72436ee05f54b3e71b1a4798fd141e1d52f03
 SHA512:
-  metadata.gz: 6599a6a5b57196ee8e068d59e782d4cc482420b689b40b6d83d0a7ba6af055b0da74c34f2b95f60bade355df248c4b0e462af153530f54470eaf1762dcd8f4bc
-  data.tar.gz: 7bef3c79841a5f081cf44432ac0b85c839c8a1dcea778a9f91d0edc96bcb74958a4d42b4290ea3faf02e9f3c3b78dabaab723c9e496d3ca7905a0ebf11d7471d
+  metadata.gz: ad77bcb3a24eb509576c8e1b81494bb266931780c0aa4f2ef0ca6142fd66a99355befc5fc1b8a2f05415dbb9ae0a3e609627a094f5f7ce200da3f50befd8001e
+  data.tar.gz: 6b7938340aa04f6a95277e8df94f6eb763eab20b85acad448498a056871bd8e8e73b24525d07c8b3b7560f1e9cb24f6552e40601fe6043e2d5ab595d973a6500

data/lib/active_frontend/version.rb

@@ -1,3 +1,3 @@
 module ActiveFrontend
-  VERSION = "12.3.0"
+  VERSION = "12.4.0"
 end

data/lib/generators/active_frontend/templates/install.scss

@@ -49,6 +49,7 @@
 @import 'sidebar';
 @import 'slider';
 @import 'spinner';
+@import 'subheader';
 @import 'swoggle';
 @import 'table';
 @import 'timepicker';

data/vendor/assets/javascripts/_chart.js

@@ -91,7 +91,7 @@
       scaleFontStyle: "bold",
 
       // String - Scale label font colour
-      scaleFontColor: "rgba(16,18,25,1)",
+      scaleFontColor: "rgba(27,30,34,1)",
 
       // Boolean - whether or not the chart should be responsive and resize when the browser does.
       responsive: true,
@@ -109,7 +109,7 @@
       tooltipEvents: ["mousemove", "touchstart", "touchmove", "mouseout"],
 
       // String - Tooltip background colour
-      tooltipFillColor: "rgba(16,18,25,1)",
+      tooltipFillColor: "rgba(27,30,34,1)",
 
       // String - Tooltip label font declaration for the scale label
       tooltipFontFamily: "'Gotham Round', 'Gotham', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
@@ -174,7 +174,7 @@
         "rgba(240,35,17,1)",
         "rgba(255,102,0,1)",
         "rgba(255,209,0,1)",
-        "rgba(35,40,55,1)",
+        "rgba(50,56,64,1)",
         "rgba(106,122,138,1)"
       ],
 
@@ -190,7 +190,7 @@
         "rgba(240,35,17,0.1)",
         "rgba(255,102,0,0.1)",
         "rgba(255,209,0,0.1)",
-        "rgba(35,40,55,0.1)",
+        "rgba(50,56,64,0.1)",
         "rgba(106,122,138,0.1)"
       ],
 
@@ -3438,7 +3438,7 @@
       pointLabelFontSize : 11,
 
       //String - Point label font colour
-      pointLabelFontColor : "rgba(16,18,25,1)",
+      pointLabelFontColor : "rgba(27,30,34,1)",
 
       //Boolean - Whether to show a dot for each point
       pointDot : true,

data/vendor/assets/stylesheets/_canvas.scss

@@ -9,10 +9,11 @@
 .canvas {
   clear: both;
   display: block;
-  max-height: 100%;
+  min-height: 100%;
   height: 100%;
   max-width: 100%;
   width: 100%;
+  z-index: 1030;
 }
 .canvas-content,
 .canvas-sidebar,
@@ -20,9 +21,10 @@
   box-sizing: border-box;
   display: block;
   float: left;
-  max-height: 100%;
+  min-height: 100%;
   height: 100%;
   @include overflow-scrolling(touch);
+  z-index: 1030;
 }
 .canvas-content {
   overflow-x: hidden;
@@ -53,17 +55,31 @@
 }
 .canvas-section-with-header,
 .canvas-section-with-header-and-footer { margin-top: 60px; }
+.canvas-section-with-header-and-subheader,
+.canvas-section-with-header-and-subheader-and-footer { margin-top: 96px; }
 .canvas-section-with-header {
-  max-height: calc(100% - 60px);
-  height: calc(100% - 60px);
+  min-height: calc(100% - 60px) !important;
+  height: calc(100% - 60px) !important;
+}
+.canvas-section-with-header-and-subheader {
+  min-height: calc(100% - 96px) !important;
+  height: calc(100% - 96px) !important;
 }
 .canvas-section-with-header-and-footer {
-  max-height: calc(100% - 90px);
-  height: calc(100% - 90px);
+  min-height: calc(100% - 90px) !important;
+  height: calc(100% - 90px) !important;
+}
+.canvas-section-with-header-and-subheader-and-footer {
+  min-height: calc(100% - 126px) !important;
+  height: calc(100% - 126px) !important;
 }
 .canvas-section-with-footer {
-  max-height: calc(100% - 30px);
-  height: calc(100% - 30px);
+  min-height: calc(100% - 30px) !important;
+  height: calc(100% - 30px) !important;
+}
+.canvas-section-with-subheader-and-footer {
+  min-height: calc(100% - 66px) !important;
+  height: calc(100% - 66px) !important;
 }
 
 /* # Media Queries
@@ -120,22 +136,27 @@
     width: 100%;
   }
   .canvas-section-with-header,
+  .canvas-section-with-header-and-subheader,
   .canvas-section-with-header-and-footer,
+  .canvas-section-with-header-and-subheader-and-footer,
   .canvas-section-with-header-and-navbar { margin-top: 50px; }
-  .canvas-section-with-header {
-    max-height: calc(100% - 50px);
+  .canvas-section-with-header,
+  .canvas-section-with-header-and-subheader {
+    background: red;
+    min-height: calc(100% - 50px);
     height: calc(100% - 50px);
   }
-  .canvas-section-with-header-and-footer {
-    max-height: calc(100% - 80px);
+  .canvas-section-with-header-and-footer,
+  .canvas-section-with-header-and-subheader-and-footer {
+    min-height: calc(100% - 80px);
     height: calc(100% - 80px);
   }
   .canvas-section-with-header-and-navbar {
-    max-height: calc(100% - 99px);
-    height: calc(100% - 99px);
+    min-height: calc(100% - 99px) !important;
+    height: calc(100% - 99px) !important;
   }
   .canvas-section-with-navbar {
-    max-height: calc(100% - 49px);
-    height: calc(100% - 49px);
+    min-height: calc(100% - 49px) !important;
+    height: calc(100% - 49px) !important;
   }
 }

data/vendor/assets/stylesheets/_color.scss

@@ -1,14 +1,15 @@
 /* Table of Contents
 ==================================================
 # Grayscale Colors
-# Base Colors */
+# Base Colors
+# Alt Colors */
 
 /* # Grayscale Colors
 ================================================== */
 $color-transparent: rgba(0,0,0,0);
-$color-dark-black: rgba(16,18,25,1);
-$color-black: rgba(35,40,55,1);
-$color-light-black: rgba(48,54,75,1);
+$color-dark-black: rgba(27,30,34,1);
+$color-black: rgba(50,56,64,1);
+$color-light-black: rgba(64,72,82,1);
 $color-dark-gray: rgba(71,82,93,1);
 $color-gray: rgba(106,122,138,1);
 $color-light-gray: rgba(151,163,175,1);
@@ -28,4 +29,17 @@ $color-purple: rgba(115,24,242,1);
 $color-pink: rgba(255,0,102,1);
 $color-red: rgba(240,35,17,1);
 $color-orange: rgba(255,102,0,1);
-$color-yellow: rgba(255,209,0,1);
+$color-yellow: rgba(255,209,0,1);
+
+/* # Alt Colors
+==================================================
+# Blue Tint
+$color-dark-black: rgba(16,18,25,1) or #101219;
+$color-black: rgba(35,40,55,1) or #232837;
+$color-light-black: rgba(48,54,75,1) or #30364B;
+
+# Purple Tint
+$color-dark-black: rgba(24,19,32,1) or #181320;
+$color-black: rgba(41,32,56,1) or #292038;
+$color-light-black: rgba(59,48,77,1) or #3B304D;
+*/

data/vendor/assets/stylesheets/_datepicker.scss

@@ -63,22 +63,23 @@
 .datepicker table th,
 .datepicker table td {
   height: 20px;
+  line-height: 1 !important;
   text-align: center;
   width: 20px;
 }
+.datepicker table th { padding: 7px 0 !important; }
 .datepicker table td {
-  font-weight: normal;
-  height: 22px;
-  line-height: 1;
+  font-size: 12px !important;
+  font-weight: bold;
 }
 .datepicker table td.new,
-.datepicker table td.old { color: $color-gray; }
+.datepicker table td.old { color: $color-dark-haze; }
 .datepicker table td > span {
   border-radius: 2px;
   display: block;
   height: 30px;
   float: left;
-  line-height: 33px;
+  line-height: 30px;
   margin: 2px;
   width: 51px;
 }
@@ -103,13 +104,13 @@
 .datepicker table > thead > tr:first-child > th { border-radius: 2px; }
 .datepicker table > thead > tr:first-child > th:nth-child(2) { font-weight: bold; }
 .datepicker table th.next,
-.datepicker table th.prev { font-size: 17px; }
+.datepicker table th.prev { font-size: 20px !important; }
 .datepicker table th.switch {
   font-weight: bold;
   width: 145px;
 }
 .datepicker table th.datepicker-switch { padding-bottom: 3px !important; }
-.datepicker table td.day.disabled { color: $color-gray; }
+.datepicker table td.day.disabled { color: $color-dark-haze; }
 .datepicker table td.day.disabled:hover,
 .datepicker table td.day.disabled.active,
 .datepicker table td.day.disabled:active,

data/vendor/assets/stylesheets/_dropdown.scss

@@ -15,9 +15,9 @@
 .dropdown-menu {
   background: $color-white;
   background-clip: padding-box;
-  border: 2px solid;
+  border: 1px solid;
   border-color: $color-haze !important;
-  box-shadow: 0 0 3px $color-dark-haze;
+  border-radius: 3px;
   box-sizing: border-box;
   color: $color-dark-black;
   display: block;
@@ -59,7 +59,11 @@
   margin: 5px 0 4px 0;
   overflow: hidden;
 }
+.dropdown-menu > li { border-color: inherit;}
 .dropdown-menu > li > a {
+  border-bottom: 1px solid;
+  border-top: 1px solid;
+  border-color: $color-transparent;
   clear: both;
   display: block;
   padding: 8px 15px;
@@ -68,7 +72,11 @@
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:active,
 .dropdown-menu > li > a.active,
-.dropdown-menu > li > a:focus { color: $color-primary; }
+.dropdown-menu > li > a:focus {
+  background: $color-light-haze;
+  border-color: inherit;
+  color: $color-primary;
+}
 .dropdown-menu > li > a i:first-child {
   display: inline-block;
   min-width: 14px;
@@ -98,7 +106,7 @@
   display: inline-block;
   left: 9px;
   position: absolute;
-  top: -9px;
+  top: -7px;
 }
 .dropdown-menu.dropdown-caret:after {
   border-bottom: 6px solid;
@@ -109,7 +117,7 @@
   display: inline-block;
   left: 10px;
   position: absolute;
-  top: -7px;
+  top: -6px;
 }
 .dropdown-menu.pull-right.dropdown-caret:before {
   left: auto;
@@ -168,7 +176,7 @@
   border-bottom: 0;
   border-top: 7px solid;
   border-top-color: inherit;
-  bottom: -9px;
+  bottom: -7px;
   left: 9px;
   top: auto;
 }
@@ -176,7 +184,7 @@
   border-bottom: 0;
   border-top: 6px solid;
   border-top-color: inherit;
-  bottom: -7px;
+  bottom: -6px;
   left: 10px;
   top: auto;
 }
@@ -195,21 +203,28 @@
 ================================================== */
 .dropdown-dark {
   background: $color-black;
-  border-color: $color-light-black !important;
-  box-shadow: 0 0 3px $color-dark-black;
+  border-color: $color-dark-black !important;
   color: $color-white;
 }
 .dropdown-light {
   background: $color-light-haze;
   border-color: $color-dark-haze !important;
 }
-.dropdown-dark > .title {
+.dropdown-dark > .title,
+.dropdown-dark > li > a:hover,
+.dropdown-dark > li > a:active,
+.dropdown-dark > li > a.active,
+.dropdown-dark > li > a:focus  {
   background: $color-light-black;
   border-color: $color-dark-black;
 }
 .dropdown-dark > .divider { background: $color-dark-black; }
 .dropdown-light > .title,
-.dropdown-light > .divider { background: $color-haze; }
+.dropdown-light > .divider,
+.dropdown-light .dropdown-menu > li > a:hover,
+.dropdown-light .dropdown-menu > li > a:active,
+.dropdown-light .dropdown-menu > li > a.active,
+.dropdown-light .dropdown-menu > li > a:focus { background: $color-haze; }
 
 /* # Media Queries
 ================================================== */
@@ -220,8 +235,8 @@ only screen and (     -o-min-device-pixel-ratio: 2/1),
 only screen and (        min-device-pixel-ratio: 2),
 only screen and (                min-resolution: 192dpi),
 only screen and (                min-resolution: 2dppx) {
-  .dropdown-menu > .title {
-    border-width: 0.5px;
-    letter-spacing: 0.5px;
-  }
+  .dropdown-menu,
+  .dropdown-menu > .title,
+  .dropdown-menu > li > a { border-width: 0.5px; }
+  .dropdown-menu > .title { letter-spacing: 0.5px; }
 }

data/vendor/assets/stylesheets/_header.scss

@@ -44,6 +44,7 @@
 .header-nav,
 .header-nav-alt,
 .header-toolchain {
+  border-color: $color-haze !important;
   float: right;
   list-style: none;
   margin: 9px 0 0 0;
@@ -61,7 +62,7 @@
 .header-nav > li,
 .header-nav-alt > li,
 .header-toolchain > li {
-  border-color: $color-haze;
+  border-color: inherit !important;
   float: left;
   line-height: 1;
 }
@@ -77,6 +78,16 @@
   box-sizing: border-box;
   float: left;
 }
+.header-btn-group > li.divider {
+  border-right: 1px solid;
+  border-color: inherit !important;
+  margin: 0 !important;
+}
+.header-btn-group > li.divider:first-child {
+  border-left: 1px solid;
+  border-color: inherit !important;
+  margin-left: 20px !important;
+}
 .header-btn-group > li > a,
 .header-nav > li.lined > a {
   border-bottom: 4px solid $color-transparent;
@@ -85,11 +96,16 @@
 .header-btn-group > li > a {
   box-sizing: border-box;
   display: block;
-  height: 60px;
+  height: 59px;
   padding-top: 24px;
   text-align: center;
   vertical-align: middle;
 }
+.header-btn-group > li.divider > a {
+  width: 240px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
 .header-nav > li.lined > a { padding-bottom: 20px; }
 .header-btn-group > li > a:hover,
 .header-btn-group > li > a:focus,
@@ -100,6 +116,9 @@
 .header-nav > li.lined > a.active,
 .header-nav > li.lined > a:active,
 .header-nav > li.lined.active > a { border-color: $color-primary; }
+.header-btn-group > li > a.subactive,
+.header-nav > li.lined > a.subactive,
+.header-nav > li.lined.subactive > a { border-color: inherit; }
 .header-btn-group-label {
   background: $color-primary;
   border-radius: 2px;
@@ -114,6 +133,33 @@
   text-align: center;
   vertical-align: middle;
 }
+.header-btn-group > li.header-btn-group-nav {
+  border-right: 1px solid;
+  border-color: inherit;
+  font-size: 12px;
+  line-height: 21px;
+  margin: 0 !important;
+}
+.header-btn-group > li.header-btn-group-nav > a {
+  border-bottom: 1px solid;
+  border-color: inherit;
+  box-sizing: border-box;
+  display: block;
+  height: 20px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  text-align: center;
+  vertical-align: middle;
+  width: 20px;
+}
+.header-btn-group > li.header-btn-group-nav > a:last-child { border-bottom: 0;}
+.header-btn-group > li.header-btn-group-nav > a:hover,
+.header-btn-group > li.header-btn-group-nav > a:focus { background: $color-haze; }
+.header-btn-group > li.header-btn-group-nav > a.active,
+.header-btn-group > li.header-btn-group-nav > a:active {
+  background: $color-primary;
+  color: $color-white;
+}
 .header-toolchain > li { font-size: 26px; }
 .header-btn-group > li,
 .header-btn-group > li.btn-group,
@@ -232,24 +278,45 @@
   top: 0;
   min-width: inherit;
   width: inherit;
-  z-index: 1030;
+  z-index: 1040;
 }
+.header-shadow { box-shadow: 0 1px 2px lighten($color-light-gray, 25%); }
+.header-shadowless { box-shadow: 0; }
 
 /* # Colors
 ================================================== */
-.header-dark {
+.header-dark,
+.header-dark .header-btn-group,
+.header-dark .header-nav,
+.header-dark .header-nav-alt,
+.header-dark .header-toolchain {
   background: $color-black;
-  border-color: $color-dark-black;
+  border-color: $color-dark-black !important;
   color: $color-white;
 }
-.header-invisible {
+.header-dark .header-btn-group > li.header-btn-group-nav > a:hover,
+.header-dark .header-btn-group > li.header-btn-group-nav > a:focus { background: $color-light-black; }
+.header-dark.header-shadow { box-shadow: 0 1px 2px $color-dark-black; }
+.header-invisible,
+.header-invisible .header-btn-group,
+.header-invisible .header-nav,
+.header-invisible .header-nav-alt,
+.header-invisible .header-toolchain {
   background: $color-transparent;
   border-color: $color-transparent;
 }
-.header-light {
+.header-invisible.header-shadow { box-shadow: 0; }
+.header-light,
+.header-light .header-btn-group,
+.header-light .header-nav,
+.header-light .header-nav-alt,
+.header-light .header-toolchain {
   background: $color-light-haze;
   border-color: $color-dark-haze;
 }
+.header-light .header-btn-group > li.header-btn-group-nav > a:hover,
+.header-light .header-btn-group > li.header-btn-group-nav > a:focus { background: $color-dark-haze; }
+.header-light.header-shadow { box-shadow: 0 1px 2px lighten($color-light-gray, 15%); }
 
 /* # Stripes
 ================================================== */
@@ -290,6 +357,15 @@
 
 /* # Media Queries
 ================================================== */
+@media only screen and (max-width: 1365px) {
+  .header-btn-group > li.divider > a { width: 200px; }
+}
+@media only screen and (max-width: 1199px) {
+  .header-btn-group > li.divider > a { width: 160px; }
+}
+@media only screen and (max-width: 959px) {
+  .header-btn-group > li.divider > a { width: 120px; }
+}
 @media only screen and (max-width: 767px) {
   .header {
     height: 50px;
@@ -307,11 +383,16 @@ only screen and (     -o-min-device-pixel-ratio: 2/1),
 only screen and (        min-device-pixel-ratio: 2),
 only screen and (                min-resolution: 192dpi),
 only screen and (                min-resolution: 2dppx) {
-  .header { border-width: 0.5px; }
+  .header,
+  .header-btn-group > li.divider,
+  .header-btn-group > li.divider:first-child,
+  .header-btn-group > li.header-btn-group-nav,
+  .header-btn-group > li.header-btn-group-nav > a { border-width: 0.5px; }
   .header-btn-group > li,
   .header-nav > li,
   .header-nav-alt > li {
     font-weight: 500;
     letter-spacing: 0.5px;
   }
+  .header-btn-group > li > a { height: 59.5px; }
 }

data/vendor/assets/stylesheets/_icon.scss

@@ -1,8 +1,23 @@
 /* Table of Contents
 ==================================================
-# Icon */
+# Keyframes
+# Font-face
+# Icon
+# Animation
+# Duration */
 
-/* # Icon
+/* # Keyframes
+================================================== */
+@-webkit-keyframes icon-spin {
+  0% { @include transform(rotate(0)); }
+  100% { @include transform(rotate(359deg)); }
+}
+@keyframes icon-spin {
+  0% { @include transform(rotate(0)); }
+  100% { @include transform(rotate(359deg)); }
+}
+
+/* # Font-face
 ================================================== */
 @font-face {
   font-family: "Ionicons";
@@ -14,8 +29,10 @@
        url(font_path("ionicons/ionicons.woff?v=2.0.1")) format("woff"),
        url(font_path("ionicons/ionicons.svg?v=2.0.1#Ionicons")) format("svg");
 }
+
+/* # Icon
+================================================== */
 .icon,
-.iconicons,
 .icon-alert:before,
 .icon-alert-circled:before,
 .icon-android-add:before,
@@ -764,23 +781,6 @@
   text-transform: none;
   text-rendering: auto;
 }
-.icon-spin,
-.icon-loading-a,
-.icon-loading-b,
-.icon-loading-c,
-.icon-loading-d,
-.icon-looping,
-.icon-refreshing,
-.icon-ios7-reloading { @include animation(spin 1s infinite linear); }
-@-webkit-keyframes spin {
-  0% { @include transform(rotate(0)); }
-  100% { @include transform(rotate(359deg)); }
-}
-@keyframes spin {
-  0% { @include transform(rotate(0)); }
-  100% { @include transform(rotate(359deg)); }
-}
-.icon-loading-a { @include animation-timing-function(steps(8, start)); }
 .icon-alert:before { content: "\f101" }
 .icon-alert-circled:before { content: "\f100" }
 .icon-android-add:before { content: "\f2c7" }
@@ -1513,4 +1513,18 @@
 .icon-wineglass:before { content: "\f2b9" }
 .icon-woman:before { content: "\f25d" }
 .icon-wrench:before { content: "\f2ba" }
-.icon-xbox:before { content: "\f30c" }
+.icon-xbox:before { content: "\f30c" }
+
+/* # Animation
+================================================== */
+.icon-spin:before { @include animation(icon-spin 2s infinite linear); }
+
+/* # Durations
+================================================== */
+.icon-spin.icon-spin-duration-fastest:before { @include animation-duration(0.5s); }
+.icon-spin.icon-spin-duration-faster:before { @include animation-duration(1s); }
+.icon-spin.icon-spin-duration-fast:before { @include animation-duration(1.5s); }
+.icon-spin.icon-spin-duration-default:before { @include animation-duration(2s); }
+.icon-spin.icon-spin-duration-slow:before { @include animation-duration(2.5s); }
+.icon-spin.icon-spin-duration-slower:before { @include animation-duration(3s); }
+.icon-spin.icon-spin-duration-slowest:before { @include animation-duration(3.5s); }

data/vendor/assets/stylesheets/_popover.scss

@@ -1,14 +1,15 @@
 /* Table of Contents
 ==================================================
-# Popover */
+# Popover
+# Media Queries */
 
 /* # Popover
 ================================================== */
 .popover {
   background: $color-white;
   background-clip: padding-box;
-  border: 1px solid $color-dark-haze;
-  box-shadow: 0 0 3px $color-dark-haze;
+  border: 1px solid $color-haze;
+  border-radius: 3px;
   display: none;
   float: none;
   font-style: normal;
@@ -44,7 +45,6 @@
 }
 .popover-title:empty { display: none; }
 .popover-content {
-  background: $color-white;
   font-weight: normal;
   line-height: 20px;
 }
@@ -113,4 +113,16 @@
   border-left-color: $color-white;
   bottom: -10px;
   right: 1px;
+}
+
+/* # Media Queries
+================================================== */
+@media
+only screen and (-webkit-min-device-pixel-ratio: 2),
+only screen and (   min--moz-device-pixel-ratio: 2),
+only screen and (     -o-min-device-pixel-ratio: 2/1),
+only screen and (        min-device-pixel-ratio: 2),
+only screen and (                min-resolution: 192dpi),
+only screen and (                min-resolution: 2dppx) {
+  .popover-title { border-width: 0.5px; }
 }

data/vendor/assets/stylesheets/_sidebar.scss

@@ -146,6 +146,15 @@
   background: $color-transparent !important;
   color: $color-primary;
 }
+.sidebar-navbar-indicator {
+  background: $color-primary;
+  border-radius: 500px;
+  display: inline-block;
+  height: 8px;
+  margin: -7px 0 0 -13px;
+  position: absolute;
+  width: 8px;
+}
 .sidebar-form {
   border-bottom: 1px solid;
   border-color: inherit;
@@ -267,4 +276,5 @@ only screen and (                min-resolution: 2dppx) {
   .sidebar-header h4,
   .sidebar-header h5,
   .sidebar-header h6 { letter-spacing: 0.5px; }
+  .sidebar-navbar-indicator { margin: -6.5px 0 0 -10.5px; }
 }

data/vendor/assets/stylesheets/_subheader.scss

@@ -0,0 +1,103 @@
+/* Table of Contents
+==================================================
+# Subheader
+# Styles
+# Colors
+# Media Queries */
+
+/* # Subheader
+================================================== */
+.subheader {
+  background: $color-white;
+  border-bottom: 1px solid;
+  border-color: $color-haze;
+  box-sizing: border-box;
+  color: inherit;
+  height: 36px;
+  min-width: 100%;
+  width: 100%;
+}
+.subheader-nav {
+  border-color: inherit;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.subheader-nav > li {
+  border-color: inherit;
+  float: left;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 1;
+  margin: 0 20px 0 0 !important;
+}
+.subheader-nav > li:last-child { margin: 0 !important; }
+.subheader-nav > li > a {
+  border-bottom: 4px solid $color-transparent;
+  display: block;
+  padding: 11px 0 9px 0;
+}
+.subheader-nav > li > a:hover,
+.subheader-nav > li > a:focus { border-color: inherit; }
+.subheader-nav > li > a.active,
+.subheader-nav > li > a:active { border-color: $color-primary; }
+.subheader-nav-label {
+  background: $color-primary;
+  border-radius: 2px;
+  color: $color-white;
+  display: inline-block;
+  font-size: 9px;
+  font-style: normal;
+  letter-spacing: 0;
+  line-height: 1;
+  margin-top: -1px;
+  padding: 4px 5px 3px 5px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+/* # Styles
+================================================== */
+.subheader-fixed {
+  position: fixed;
+  top: 60px;
+  min-width: inherit;
+  width: inherit;
+  z-index: 1040;
+}
+.subheader-shadow { box-shadow: 0 1px 2px lighten($color-light-gray, 25%); }
+.subheader-shadowless { box-shadow: 0; }
+
+/* # Styles
+================================================== */
+.subheader-dark,
+.subheader-dark .subheader-nav > li > a:hover,
+.subheader-dark .subheader-nav > li > a:focus {
+  background: $color-black;
+  border-color: $color-dark-black;
+  color: $color-white;
+}
+.subheader-dark.subheader-shadow { box-shadow: 0 1px 2px $color-dark-black; }
+.subheader-light,
+.subheader-light .subheader-nav > li > a:hover,
+.subheader-light .subheader-nav > li > a:focus {
+  background: $color-light-haze;
+  border-color: $color-dark-haze;
+}
+.subheader-light.subheader-shadow { box-shadow: 0 1px 2px lighten($color-light-gray, 15%); }
+
+/* # Media Queries
+================================================== */
+@media only screen and (max-width: 767px) {
+  .subheader { display: none; }
+}
+@media
+only screen and (-webkit-min-device-pixel-ratio: 2),
+only screen and (   min--moz-device-pixel-ratio: 2),
+only screen and (     -o-min-device-pixel-ratio: 2/1),
+only screen and (        min-device-pixel-ratio: 2),
+only screen and (                min-resolution: 192dpi),
+only screen and (                min-resolution: 2dppx) {
+  .subheader { border-width: 0.5px; }
+  .subheader-nav > li { font-weight: 500; }
+}

data/vendor/assets/stylesheets/_timepicker.scss

@@ -43,12 +43,16 @@
   border-bottom: 0;
   border-top: 7px solid;
   border-color: inherit;
+  border-left-color: $color-transparent;
+  border-right-color: $color-transparent;
   bottom: -7px;
 }
 .timepicker-widget.timepicker-orient-bottom:after {
   border-bottom: 0;
   border-top: 6px solid;
   border-color: inherit;
+  border-left-color: $color-transparent;
+  border-right-color: $color-transparent;
   bottom: -6px;
 }
 .timepicker-widget > table {

data/vendor/assets/stylesheets/active_frontend.scss

@@ -49,6 +49,7 @@
 @import 'sidebar';
 @import 'slider';
 @import 'spinner';
+@import 'subheader';
 @import 'swoggle';
 @import 'table';
 @import 'timepicker';

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: active_frontend
 version: !ruby/object:Gem::Version
-  version: 12.3.0
+  version: 12.4.0
 platform: ruby
 authors:
 - Juan Gomez
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-01-23 00:00:00.000000000 Z
+date: 2016-02-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -203,6 +203,7 @@ files:
 - vendor/assets/stylesheets/_sidebar.scss
 - vendor/assets/stylesheets/_slider.scss
 - vendor/assets/stylesheets/_spinner.scss
+- vendor/assets/stylesheets/_subheader.scss
 - vendor/assets/stylesheets/_swoggle.scss
 - vendor/assets/stylesheets/_table.scss
 - vendor/assets/stylesheets/_timepicker.scss