vendor/assets/stylesheets/header.scss in active_frontend-1.0.11 vs vendor/assets/stylesheets/header.scss in active_frontend-2.0.0
- old
+ new
@@ -1,121 +1,112 @@
/* Table of Contents
==================================================
# Header
# Application
-# Alternate
# Media Queries */
/* # Header
================================================== */
+.header-fixed {
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 1030;
+}
.header {
background: rgba(255,255,255,1);
border-bottom: 1px solid rgba(225,232,237,1);
- box-sizing: border-box;
box-shadow: 0 1px 3px rgba(225,232,237,1);
- height: 86px;
- margin-bottom: 40px;
+ box-sizing: border-box;
+ height: 80px;
+ padding: 0 10px;
width: 100%;
}
.header-brand > a {
- color: rgba(15,135,226,1);
+ color: rgba(0,132,255,1);
float: left;
font-size: 44px;
- margin-top: 21px;
+ line-height: 88px;
text-decoration: none;
}
.header-trunk {
float: left;
- height: 85px;
list-style-type: none;
- margin: 0 0 0 30px;
+ margin: 0 0 0 20px;
padding: 0;
}
-.header-trunk > li {
- background: rgba(255,255,255,1);
- border-right: 1px solid rgba(230,237,242,1);
- color: rgba(102,117,127,1);
- float: left;
- font-weight: 500;
- font-size: 13px;
- height: 100%;
- line-height: 85px;
- margin: 0;
- width: 220px;
- text-align: center;
-}
-.header-trunk > li:first-child { border-left: 1px solid rgba(230,237,242,1); }
+.header-trunk > li { float: left; }
+.header-trunk > li.btn-group a { border-radius: 0; }
.header-trunk > li.btn-group + li.btn-group { margin: 0; }
.header-trunk > li > a {
background: rgba(255,255,255,1);
+ border-radius: 0;
+ border-right: 1px solid rgba(230,237,242,1);
+ box-sizing: border-box;
color: rgba(102,117,127,1);
display: block;
- height: 100%;
+ font-size: 13px;
+ font-weight: 500;
+ line-height: 13px;
letter-spacing: 1px;
overflow: hidden;
- padding: 0 15px;
+ padding: 33px 15px 32px 15px;
+ text-align: center;
text-decoration: none;
- text-transform: uppercase;
- text-overflow: ellipsis;
+ text-transform: uppercase;
+ text-overflow: ellipsis;
+ vertical-align: middle;
white-space: nowrap;
- width: 190px;
+ width: 220px;
}
-.header-trunk > li > a:active,
-.header-trunk > li > a.active,
-.header-trunk > li > a:hover,
-.header-trunk > li > a:focus { color: rgba(15,135,226,1); }
-.header-trunk > li.header-trunk-navicon {
+.header-trunk > li:first-child > a { border-left: 1px solid rgba(230,237,242,1); }
+.header-trunk > li > a > .badge,
+.header-trunk > li > a > .label {
+ display: inline-block;
+ font-size: 10px;
+ letter-spacing: 0;
+ line-height: 10px;
+ min-width: 10px;
+ padding: 4px;
+ text-transform: none;
+ vertical-align: middle;
+}
+.header-trunk > li.header-trunk-navicon a {
font-size: 32px;
- line-height: 90px;
+ line-height: 32px;
+ padding: 24px 10px 20px 10px;
width: 74px;
}
-.header-trunk > li.header-trunk-navicon a {
- padding: 0 10px;
- width: 54px;
-}
.header-trunk > li > ul.dropdown-menu {
- background: rgba(56,67,81,1);
border-top-right-radius: 0;
- border-top-left-radius: 0;
- border-color: rgba(26,37,51,1);
+ border-top-left-radius: 0;
box-shadow: 0 1px 2px rgba(56,67,81,0.75);
margin: 0 0 0 -1px;
padding: 10px 0;
width: calc(100% + 2px);
}
-.header-trunk > li > ul.dropdown-menu > li.divider {
- background: rgba(26,37,51,1);
- margin: 14px 0 10px 0;
-}
-.header-trunk > li > ul.dropdown-menu > li > a { color: rgba(255,255,255,1); }
-.header-trunk > li > ul.dropdown-menu > li > a:hover,
-.header-trunk > li > ul.dropdown-menu > li > a:focus { color: rgba(15,135,226,1); }
-.header-trunk > li > ul.dropdown-menu > li > a:active,
-.header-trunk > li > ul.dropdown-menu > li > a.active { color: rgba(112,169,13,1); }
+.header-trunk > li > ul.dropdown-menu > li.divider { margin: 14px 0 10px 0; }
.header-trunk > li .badge,
.header-trunk > li .label { margin: -8px 0 -6px 0; }
.header-search {
float: left;
- margin: 22px 0 0 30px;
+ margin: 19px 0 0 20px;
width: 280px;
}
-.header-search > input {
- background: transparent;
- font-weight: 200;
- margin: 0;
-}
+.header-search > input { margin: 0; }
.header-nav {
float: right;
list-style-type: none;
- margin: 28px 0 10px 0;
+ margin: 26px 0 10px 0;
padding: 0;
}
.header-nav > li {
- color: rgba(102,117,127,1);
+ color: rgba(43,50,53,1);
display: inline-block;
+ font-size: 13px;
font-weight: 500;
- font-size: 13px;
margin-left: 15px;
line-height: 13px;
}
.header-nav > li:first-child { margin-left: 0; }
.header-nav > li > a {
@@ -123,29 +114,21 @@
border-radius: 2px;
color: rgba(102,117,127,1);
letter-spacing: 1px;
padding: 14px 0 13px 0;
text-decoration: none;
- text-transform: uppercase;
+ 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(15,135,226,1); }
.header-nav > li.bordered > a {
border-color: rgba(230,237,242,1);
padding-right: 20px;
- padding-left: 20px;
+ padding-left: 20px;
}
-.header-nav > li.bordered > a:active,
-.header-nav > li.bordered > a.active,
-.header-nav > li.bordered > a:hover,
-.header-nav > li.bordered > a:focus { border-color: rgba(15,135,226,1); }
.header-user {
float: right;
font-size: 13px;
- margin: 22px 0 0 15px;
+ margin: 19px 0 0 15px;
}
.header-user > a {
color: rgba(102,117,127,1);
text-decoration: none;
}
@@ -175,46 +158,26 @@
text-decoration: none;
}
/* # Application
================================================== */
-.header-app { height: 66px; }
-.header-app .header-brand > a { margin-top: 11px; }
-.header-app .header-trunk {
- height: 65px;
- line-height: 65px;
-}
-.header-app .header-trunk > li { line-height: 65px; }
-.header-app .header-trunk > li.header-trunk-navicon { line-height: 70px; }
-.header-app .header-search { margin-top: 11px; }
-.header-app .header-nav { margin-top: 19px; }
-.header-app .header-user { margin-top: 13px; }
+.header-app { height: 60px; }
+.header-app .header-brand > a { line-height: 67px; }
+.header-app .header-trunk > li > a { padding: 23px 15px 22px 15px; }
+.header-app .header-trunk > li.header-trunk-navicon a { padding: 13px 10px 11px 10px; }
+.header-app .header-search { margin-top: 9px; }
+.header-app .header-nav { margin-top: 17px; }
+.header-app .header-user { margin-top: 10px; }
-/* # Alternate
-================================================== */
-.header-alt {
- background: transparent;
- border-color: transparent;
- box-shadow: none;
-}
-.header-alt .header-brand > a { color: rgba(176,193,206,1); }
-.header-alt .header-nav > li > a { color: rgba(176,193,206,1); }
-.header-alt .header-nav > li.bordered > a:hover { border-color: rgba(230,237,242,1); }
-
/* # Media Queries
================================================== */
-@media only screen and (min-width: 960px) and (max-width: 1199px) {
- .header-trunk > li { width: 200px; }
- .header-trunk > li > a { width: 170px; }
-}
@media only screen and (min-width: 768px) and (max-width: 959px) {
- .header-trunk > li { width: 180px; }
- .header-trunk > li > a { width: 150px; }
+ .header-trunk > li > a { width: 180px; }
}
@media only screen and (max-width: 767px) {
.header { height: 50px; }
.header-brand > a,
.header-app .header-brand > a {
font-size: 36px;
- margin-top: 7px;
+ line-height: 57px;
}
}
\ No newline at end of file