active_frontend 7.0.2 → 8.0.0

data/vendor/assets/stylesheets/_header.scss

@@ -3,6 +3,7 @@
 # Header
 # Colors
 # Styles
+# Sizes
 # Media Queries */
 
 /* # Header
@@ -16,18 +17,17 @@
 }
 .header {
   background: $color-white;
-  border-bottom: 2px solid $color-haze-light;
+  border-bottom: 1px solid $color-haze;
   box-sizing: border-box;
-  height: 65px;
+  height: 60px;
   padding: 15px 0;
   width: 100%;
 }
-.header-app { width: calc(100% - 280px); }
 .header-brand { float: left; }
 .header-brand > a {
   color: $color-primary;
   font-size: 30px;
-  line-height: 40px;
+  line-height: 30px;
   text-decoration: none;
 }
 .header-brand > a > img {
@@ -36,59 +36,63 @@
 }
 .header-search {
   float: left;
-  margin: -3px 0 0 20px;
+  margin: -6px 0 0 20px;
   width: 280px;
 }
 .header-search > input { margin: 0; }
 .header-nav,
 .header-nav-alt,
 .header-toolchain {
-  color: $color-black;
+  color: $color-gray-dark;
   list-style-type: none;
   padding: 0;
 }
-.header-nav-alt,
-.header-toolchain { float: right; }
 .header-nav {
   float: left;
-  margin: 5px 0 0 20px;
+  margin: 10px 0 0 0;
 }
-.header-nav-alt { margin: 12px 0 0 0; }
-.header-toolchain { margin: 2px 25px 0 0; }
+.header-nav-alt,
+.header-toolchain { float: right; }
+.header-nav-alt { margin: 10px 0 0 0; }
+.header-toolchain { margin: 1px 25px 0 0; }
 .header-nav > li,
 .header-nav-alt > li,
-.header-toolchain > li { float: left; }
+.header-toolchain > li {
+  float: left;
+  color: $color-gray-dark;
+}
 .header-nav > li,
 .header-nav-alt > li {
-  color: $color-black;
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 1px;
   line-height: 12px;
-  margin-left: 15px;
   text-transform: uppercase;
 }
-.header-nav > li { margin-right: 20px; }
-.header-toolchain > li { margin-left: 15px; }
-.header-nav > li:last-child,
-.header-toolchain > li:first-child { margin: 0; }
+.header-nav > li,
+.header-nav > li.btn-group,
 .header-nav > li.btn-group + li.btn-group,
+.header-nav-alt > li,
+.header-nav-alt > li.btn-group,
+.header-nav-alt > li.btn-group + li.btn-group { margin-left: 20px; }
+.header-toolchain > li,
+.header-toolchain > li.btn-group,
+.header-toolchain > li.btn-group + li.btn-group { margin-left: 15px; }
+.header-nav > li.btn-group,
+.header-nav-alt > li.btn-group,
+.header-toolchain > li.btn-group { margin-top: -1px; }
 .header-nav-alt > li:first-child,
-.header-nav-alt > li.btn-group + li.btn-group,
-.header-toolchain > li.btn-group + li.btn-group { margin-left: 0; }
-.header-nav > li { margin-top: 7px; }
-.header-nav > li.btn-group { margin-top: 6px; }
-.header-nav-alt > li.btn-group { margin-top: -1px; }
+.header-toolchain > li:first-child { margin-left: 0; }
 .header-nav > li > a,
 .header-nav-alt > li > a,
 .header-toolchain > li > a {
-  color: $color-black;
+  color: $color-gray-dark;
   text-decoration: none;
 }
-.header-nav-alt > li > a { padding: 15px 0 14px 0; }
+.header-nav-alt > li > a { padding: 10px 0 9px 0; }
 .header-toolchain > li > a {
-  font-size: 30px;
-  line-height: 30px;
+  font-size: 26px;
+  line-height: 26px;
 }
 .header-nav > li > a:hover,
 .header-nav > li > a.active,
@@ -119,13 +123,14 @@
 .header-nav-alt > li.inverse > a.active,
 .header-nav-alt > li.inverse > a:active,
 .header-nav-alt > li.inverse > a:focus {
-  background: $color-primary;
+  background: darken($color-primary, 4%);
   color: $color-white;
 }
 .header-user {
   float: right;
   font-size: 13px;
-  margin: 0 0 0 20px;
+  line-height: 13px;
+  margin: -3px 0 0 20px;
 }
 .header-user > a {
   color: $color-black;
@@ -137,7 +142,7 @@
 .header-user > a:focus { color: $color-primary; }
 .header-user > a > img,
 .header-user-placeholder {
-  background: $color-gray-dark;
+  background: $color-gray;
   border-radius: 500px;
   color: $color-white;
   display: inline-block;
@@ -161,30 +166,43 @@
   text-decoration: none;
 }
 
+/* # Styles
+================================================== */
+.header-borderless { border-bottom-color: transparent !important; }
+
+/* # Sizes
+================================================== */
+.header-app { width: calc(100% - 280px); }
+
 /* # Colors
 ================================================== */
-.header-dark,
-.header-primary { border-color: rgba(0,0,0,0.2); }
-.header-dark { background: $color-black; }
-.header-primary { background: $color-primary; }
+.header-dark {
+  background: $color-black;
+  border-color: $color-black-dark;
+}
+.header-invisible {
+  background: rgba(0,0,0,0);
+  border-color: rgba(0,0,0,0);
+}
+.header-light {
+  background: $color-haze-light;
+  border-color: $color-haze-dark;
+}
+.header-dark .header-nav > li,
+.header-dark .header-nav-alt > li,
+.header-dark .header-toolchain > li,
 .header-dark .header-nav > li > a,
 .header-dark .header-nav-alt > li > a,
-.header-dark .header-nav-alt > li.inverse > a:hover,
-.header-dark .header-nav-alt > li.inverse > a.active,
-.header-dark .header-nav-alt > li.inverse > a:active,
-.header-dark .header-nav-alt > li.inverse > a:focus,
 .header-dark .header-toolchain > li > a,
-.header-dark .header-user > a { color: $color-gray; }
-.header-primary .header-nav > li > a,
-.header-primary .header-nav-alt > li > a,
-.header-primary .header-nav-alt > li.inverse > a:hover,
-.header-primary .header-nav-alt > li.inverse > a.active,
-.header-primary .header-nav-alt > li.inverse > a:active,
-.header-primary .header-nav-alt > li.inverse > a:focus,
-.header-primary .header-toolchain > li > a,
-.header-primary .header-user > a { color: $color-white; }
-.header-dark .header-brand > a,
-.header-primary .header-brand > a,
+.header-dark .header-user > a,
+.header-invisible .header-brand > a,
+.header-invisible .header-nav > li,
+.header-invisible .header-nav-alt > li,
+.header-invisible .header-toolchain > li,
+.header-invisible .header-nav > li > a,
+.header-invisible .header-nav-alt > li > a,
+.header-invisible .header-toolchain > li > a,
+.header-invisible .header-user > a { color: $color-white; }
 .header-dark .header-nav > li > a:hover,
 .header-dark .header-nav > li > a.active,
 .header-dark .header-nav > li > a:active,
@@ -193,7 +211,6 @@
 .header-dark .header-nav-alt > li > a.active,
 .header-dark .header-nav-alt > li > a:active,
 .header-dark .header-nav-alt > li > a:focus,
-.header-dark .header-nav-alt > li.inverse > a,
 .header-dark .header-toolchain > li > a:hover,
 .header-dark .header-toolchain > li > a.active,
 .header-dark .header-toolchain > li > a:active,
@@ -201,58 +218,19 @@
 .header-dark .header-user > a:hover,
 .header-dark .header-user > a.active,
 .header-dark .header-user > a:active,
-.header-dark .header-user > a:focus,
-.header-dark .header-user > img,
-.header-dark .header-user-placeholder,
-.header-dark .header-toggle > a,
-.header-primary .header-toggle > a { color: $color-white }
-.header-primary .header-nav > li > a:hover,
-.header-primary .header-nav > li > a.active,
-.header-primary .header-nav > li > a:active,
-.header-primary .header-nav > li > a:focus,
-.header-primary .header-nav-alt > li > a:hover,
-.header-primary .header-nav-alt > li > a.active,
-.header-primary .header-nav-alt > li > a:active,
-.header-primary .header-nav-alt > li > a:focus,
-.header-primary .header-nav-alt > li.inverse > a,
-.header-primary .header-toolchain > li > a:hover,
-.header-primary .header-toolchain > li > a.active,
-.header-primary .header-toolchain > li > a:active,
-.header-primary .header-toolchain > li > a:focus,
-.header-primary .header-user > a:hover,
-.header-primary .header-user > a.active,
-.header-primary .header-user > a:active,
-.header-primary .header-user > a:focus,
-.header-primary .header-user > img,
-.header-primary .header-user-placeholder { color: $color-black }
-.header-dark .header-nav-alt > li.inverse > a,
-.header-primary .header-nav-alt > li.inverse > a {
- background: transparent;
- border-color: $color-white;
-}
-.header-primary .header-nav-alt > li.inverse > a { color:$color-white; }
-.header-dark .header-nav-alt > li.inverse > a:hover,
-.header-dark .header-nav-alt > li.inverse > a.active,
-.header-dark .header-nav-alt > li.inverse > a:active,
-.header-dark .header-nav-alt > li.inverse > a:focus { border-color: $color-gray; }
-.header-primary .header-nav-alt > li.inverse > a:hover,
-.header-primary .header-nav-alt > li.inverse > a.active,
-.header-primary .header-nav-alt > li.inverse > a:active,
-.header-primary .header-nav-alt > li.inverse > a:focus {
-  border-color: $color-black;
-  color: $color-black;
-}
-.header-dark .header-user > img,
-.header-dark .header-user-placeholder { background: $color-gray; }
-.header-light {
-  background: $color-haze-light;
-  border-color: $color-haze-dark;
+.header-dark .header-user > a:focus { color: $color-primary; }
+.header-dark .header-nav-alt > li.inverse > a { color: $color-white; }
+.header-dark .header-search > input { border-color: $color-black-dark; }
+.header-invisible .header-nav-alt > li.inverse > a {
+  background: $color-white;
+  border-color: $color-white;
+  color: $color-white;
 }
-
-/* # Styles
-================================================== */
-.header-borderless { border-bottom-color: transparent !important; }
-.header-border-alt { border-bottom-color: $color-primary !important; }
+.header-invisible .header-nav-alt > li.inverse.outline > a { background: transparent; }
+.header-invisible .header-nav-alt > li.inverse > a:hover,
+.header-invisible .header-nav-alt > li.inverse > a.active,
+.header-invisible .header-nav-alt > li.inverse > a:active,
+.header-invisible .header-nav-alt > li.inverse > a:focus { background: darken($color-primary, 4%); }
 
 /* # Media Queries
 ================================================== */
@@ -267,7 +245,6 @@
 }
 @media only screen and (max-width: 767px) {
   .header {
-    border-color: $color-haze;
     height: 50px;
     padding: 0;
   }
@@ -275,12 +252,14 @@
     font-size: 36px;
     line-height: 57px;
   }
-  .header-brand > a > img { height: 50px; }
-  .header-dark,
-  .header-primary,
-  .header-primary-phone { border-color: rgba(0,0,0,0.2); }
-  .header-light { border-color: $color-haze-dark; }
-  .header-primary-phone { background: $color-primary; }
-  .header-primary-phone .header-brand > a,
-  .header-primary-phone .header-toggle > a { color: $color-white; }
+  .header-brand > a > img { height: 36px; }
+}
+@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) {
+  .header { border-width: 0.5px; }
 }

data/vendor/assets/stylesheets/_label_and_badge.scss

@@ -24,7 +24,11 @@
 .badge { border-radius: 500px; }
 .badge:empty,
 .label:empty { display: none; }
+.badge-black-light,
+.label-black-light,
 .badge-black,
+.label-black-dark,
+.badge-black-dark,
 .label-black,
 .badge-blue,
 .label-blue,
@@ -36,6 +40,10 @@
 .label-gray-dark,
 .badge-green,
 .label-green,
+.badge-indigo,
+.label-indigo,
+.badge-lime,
+.label-lime,
 .badge-orange,
 .label-orange,
 .badge-pink,
@@ -44,13 +52,25 @@
 .label-purple,
 .badge-red,
 .label-red,
+.badge-teal,
+.label-teal,
 .badge-yellow,
 .label-yellow { color: $color-white; }
+.badge-black-light,
+.label-black-light {
+  background: $color-black-light;
+  border-color: $color-black-light;
+}
 .badge-black,
 .label-black {
   background: $color-black;
   border-color: $color-black;
 }
+.badge-black-dark,
+.label-black-dark {
+  background: $color-black-dark;
+  border-color: $color-black-dark;
+}
 .badge-blue,
 .label-blue {
   background: $color-blue;
@@ -71,6 +91,26 @@
   background: $color-gray-dark;
   border-color: $color-gray-dark;
 }
+.badge-haze-light,
+.label-haze-light {
+  background: $color-haze-light;
+  border-color: $color-haze-light;
+}
+.badge-haze-dark,
+.label-haze-dark {
+  background: $color-haze-dark;
+  border-color: $color-haze-dark;
+}
+.badge-indigo,
+.label-indigo {
+  background: $color-indigo;
+  border-color: $color-indigo;
+}
+.badge-lime,
+.label-lime {
+  background: $color-lime;
+  border-color: $color-lime;
+}
 .badge-green,
 .label-green {
   background: $color-green;
@@ -96,6 +136,11 @@
   background: $color-red;
   border-color: $color-red;
 }
+.badge-teal,
+.label-teal {
+  background: $color-teal;
+  border-color: $color-teal;
+}
 .badge-white,
 .label-white {
   background: $color-white;
@@ -109,10 +154,14 @@
 .badge.badge-outline,
 .label.label-outline {
   background: transparent;
-  color: $color-gray-dark;
+  color: $color-haze;
 }
+.badge-black-light.badge-outline,
+.label-black-light.label-outline { color: $color-black-light; }
 .badge-black.badge-outline,
 .label-black.label-outline { color: $color-black; }
+.badge-black-dark.badge-outline,
+.label-black-dark.label-outline { color: $color-black-dark; }
 .badge-blue.badge-outline,
 .label-blue.label-outline { color: $color-blue; }
 .badge-gray-light.badge-outline,
@@ -123,6 +172,14 @@
 .label-gray-dark.label-outline { color: $color-gray-dark; }
 .badge-green.badge-outline,
 .label-green.label-outline { color: $color-green; }
+.badge-haze-light.badge-outline,
+.label-haze-light.label-outline { color: $color-haze-light; }
+.badge-haze-dark.badge-outline,
+.label-haze-dark.label-outline { color: $color-haze-dark; }
+.badge-indigo.badge-outline,
+.label-indigo.label-outline { color: $color-indigo; }
+.badge-lime.badge-outline,
+.label-lime.label-outline { color: $color-lime; }
 .badge-orange.badge-outline,
 .label-orange.label-outline { color: $color-orange; }
 .badge-pink.badge-outline,
@@ -131,6 +188,8 @@
 .label-purple.label-outline { color: $color-purple; }
 .badge-red.badge-outline,
 .label-red.label-outline { color: $color-red; }
+.badge-teal.badge-outline,
+.label-teal.label-outline { color: $color-teal; }
 .badge-white.badge-outline,
 .label-white.label-outline { color: $color-white; }
 .badge-yellow.badge-outline,

data/vendor/assets/stylesheets/_list.scss

@@ -1,6 +1,7 @@
 /* Table of Contents
 ==================================================
-# List */
+# List
+# Media Queries */
 
 /* # List
 ================================================== */
@@ -63,4 +64,19 @@ ol { padding-left: 23px; }
 .list-bordered.list-small > li,
 .list-lined.list-small > li,
 .list-striped.list-small > li { padding: 5px 5px 3px 5px; }
-.list-hover > li:hover { background: $color-haze; }
+.list-hover > li:hover { background: $color-haze; }
+
+/* # 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) {
+  .list-bordered > li,
+  .list-bordered > li:last-child,
+  .list-bordered.list-scrollable,
+  .list-lined > li  { border-width: 0.5px; }
+}