header.scss in active_frontend-4.5.0

- old
+ new

@@ -1,9 +1,10 @@
 /* Table of Contents
 ==================================================
 # Header
 # Alternate
+# Application
 # Media Queries */
 
 /* # Header
 ================================================== */
 .header-fixed {
@@ -12,20 +13,20 @@
   right: 0;
   top: 0;
   z-index: 1030;
 }
 .header {
-  background: rgba(91,146,250,1);
-  border-bottom: 4px solid rgba(0,0,0,0.1);
+  background: rgba(255,255,255,1);
+  border-bottom: 4px solid rgba(245,248,250,1);
   box-sizing: border-box;
   height: 65px;
   padding: 15px 0;
   width: 100%;
 }
 .header-brand { float: left; }
 .header-brand > a {
-  color: rgba(255,255,255,1);
+  color: rgba(91,146,250,1);
   font-size: 30px;
   line-height: 40px;
   text-decoration: none;
 }
 .header-brand > a > img {
@@ -37,10 +38,11 @@
   margin: -3px 0 0 20px;
   width: 280px;
 }
 .header-search > input { margin: 0; }
 .header-nav {
+  color: rgba(85,94,113,1);
   float: left;
   list-style-type: none;
   margin: 5px 0 0 20px;
   padding: 0;
 }
@@ -53,29 +55,30 @@
   line-height: 12px;
   margin-top: 7px;
 }
 .header-nav > li.btn-group + li.btn-group { margin-left: 0; }
 .header-nav > li > a {
-  color: rgba(42,44,48,1);
+  color: rgba(85,94,113,1);
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 1px;
   line-height: 12px;
   text-decoration: none;
   text-transform: uppercase;
 }
 .header-nav > li > a.active,
 .header-nav > li > a:active,
 .header-nav > li > a:hover,
-.header-nav > li > a:focus { color: rgba(255,255,255,1); }
+.header-nav > li > a:focus { color: rgba(91,146,250,1); }
 .header-nav-alt {
   float: right;
   list-style-type: none;
   margin: 4px 0 0 0;
   padding: 0;
 }
 .header-nav-alt > li {
+  color: rgba(85,94,113,1);
   display: inline-block;
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 1px;
   line-height: 12px;
@@ -84,29 +87,29 @@
 }
 .header-nav-alt > li:first-child,
 .header-nav-alt > li.btn-group + li.btn-group { margin-left: 0; }
 .header-nav-alt > li.btn-group { margin-top: 2px; }
 .header-nav-alt > li > a {
-  color: rgba(255,255,255,1);
+  color: rgba(85,94,113,1);
   letter-spacing: 1px;
   padding: 15px 0 13px 0;
   text-transform: uppercase;
 }
 .header-nav-alt > li > a.active,
 .header-nav-alt > li > a:active,
 .header-nav-alt > li > a:hover,
-.header-nav-alt > li > a:focus { color: rgba(42,44,48,1); }
+.header-nav-alt > li > a:focus { color: rgba(91,146,250,1); }
 .header-nav-alt > li.inverse > a {
-  background: rgba(255,255,255,1);
+  background: rgba(91,146,250,1);
   border-radius: 500px;
-  color: rgba(42,44,48,1);
+  color: rgba(255,255,255,1);
   padding-left: 20px;
   padding-right: 20px;
 }
 .header-nav-alt > li.inverse > a:hover {
+  background: rgba(85,94,113,1);
   color: rgba(255,255,255,1);
-  background: rgba(0,0,0,0.1);
 }
 .header-toolchain {
   float: right;
   list-style-type: none;
   margin: 2px 25px 0 0;
@@ -117,33 +120,33 @@
   margin-left: 15px;
 }
 .header-toolchain > li:first-child { margin: 0; }
 .header-toolchain > li.btn-group + li.btn-group { margin-left: 0; }
 .header-toolchain > li > a {
-  color: rgba(42,44,48,1);
+  color: rgba(85,94,113,1);
   font-size: 30px;
   line-height: 30px;
   text-decoration: none;
 }
 .header-toolchain > li > a.active,
 .header-toolchain > li > a:active,
 .header-toolchain > li > a:hover,
-.header-toolchain > li > a:focus { color: rgba(255,255,255,1); }
+.header-toolchain > li > a:focus { color: rgba(91,146,250,1); }
 .header-user {
   float: right;
   font-size: 13px;
   margin: -1px 0 0 20px;
 }
 .header-user > a {
-  color: rgba(255,255,255,1);
+  color: rgba(85,94,113,1);
   text-decoration: none;
 }
 .header-user img,
 .header-user-placeholder {
-  background: rgba(255,255,255,1);
+  background: rgba(85,94,113,1);
   border-radius: 500px;
-  color: rgba(42,44,48,1);
+  color: rgba(255,255,255,1);
   display: inline-block;
   height: 36px;
   margin: 0;
   padding: 0;
   text-align: center;
@@ -154,56 +157,35 @@
   font-size: 20px;
   line-height: 36px;
 }
 .header-user > ul.dropdown-menu { margin: -5px 10px 0 0; }
 .header-toggle > a {
-  color: rgba(255,255,255,1);
+  color: rgba(91,146,250,1);
   float: right;
   font-size: 40px;
   padding: 4px 0px 3px 14px;
   text-decoration: none;
 }
 
 /* # Alternate
 ================================================== */
-.header.header-alt {
-  background: rgba(255,255,255,1);
-  border-color: rgba(255,255,255,1);
-}
-.header.header-alt .header-brand > a { color: rgba(91,146,250,1) }
-.header.header-alt .header-nav > li > a { color: rgba(85,94,113,1); }
-.header.header-alt .header-nav > li > a.active,
-.header.header-alt .header-nav > li > a:active,
-.header.header-alt .header-nav > li > a:hover,
-.header.header-alt .header-nav > li > a:focus { color: rgba(91,146,250,1); }
-.header.header-alt .header-nav-alt > li > a { color: rgba(85,94,113,1); }
-.header.header-alt .header-nav-alt > li > a.active,
-.header.header-alt .header-nav-alt > li > a:active,
-.header.header-alt .header-nav-alt > li > a:hover,
-.header.header-alt .header-nav-alt > li > a:focus { color: rgba(91,146,250,1); }
-.header.header-alt .header-nav-alt > li.inverse > a {
- background: rgba(91,146,250,1);
- color: rgba(255,255,255,1);
-}
-.header.header-alt .header-nav-alt > li.inverse > a:hover {
-  background: rgba(245,248,250,1);
-  color: rgba(42,44,48,1);
-}
-.header.header-alt .header-toolchain > li > a { color: rgba(85,94,113,1); }
-.header.header-alt .header-toolchain > li > a.active,
-.header.header-alt .header-toolchain > li > a:active,
-.header.header-alt .header-toolchain > li > a:hover,
-.header.header-alt .header-toolchain > li > a:focus { color: rgba(91,146,250,1); }
-.header.header-alt .header-user > a { color: rgba(85,94,113,1); }
-.header.header-alt .header-user img,
-.header.header-alt .header-user-placeholder {
-  background: rgba(85,94,113,1);
-  color: rgba(255,255,255,1);
-}
-.header.header-alt .header-toggle > a { color: rgba(91,146,250,1); }
+.header.header-alt { border-bottom-color: rgba(255,255,255,1); }
 
+/* # Application
+================================================== */
+.header.header-app { width: calc(100% - 280px); }
+
 /* # Media Queries
 ================================================== */
+@media only screen and (max-width: 1365px) {
+  .header.header-app { width: calc(100% - 250px); }
+}
+@media only screen and (max-width: 1199px) {
+  .header.header-app { width: calc(100% - 220px); }
+}
+@media only screen and (max-width: 959px) {
+  .header.header-app { width: 100%; }
+}
 @media only screen and (max-width: 767px) {
   .header {
     height: 50px;
     padding: 0;
   }
\ No newline at end of file