Commit 57d90128 authored by Nic's avatar Nic Committed by Aegir user

Menu, sub-nav & header revisions, plus general css merges

parent 708870ad
...@@ -11,6 +11,7 @@ base theme = bootstrap ...@@ -11,6 +11,7 @@ base theme = bootstrap
regions[topnav] = 'Top Navigation' regions[topnav] = 'Top Navigation'
regions[navigation] = 'Navigation' regions[navigation] = 'Navigation'
regions[subnav] = 'Sub Navigation'
regions[header] = 'Header' regions[header] = 'Header'
regions[help] = 'Help' regions[help] = 'Help'
regions[content] = 'Content' regions[content] = 'Content'
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
*****************************************************************/ *****************************************************************/
/************* /*************
CORE TYPE CORE TYPOGRAPHY
***************/ ***************/
/* Imports */ /* Imports */
...@@ -33,72 +33,29 @@ ...@@ -33,72 +33,29 @@
@import 'https://fonts.googleapis.com/css?family=Oswald:700&subset=latin-ext'; @import 'https://fonts.googleapis.com/css?family=Oswald:700&subset=latin-ext';
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700,700i'; @import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700,700i';
/* SPACING FIXES */ /* Missing Bootstrap responsive code */
.page-header h1, .embed-responsive {
.page-node .page-header, position: relative;
.page-header { display: block;
margin-top: 0px; height: 0;
} padding: 0;
body.admin-menu header#page-header { overflow: hidden;
margin-top: 16px;
}
.admin-menu.civicrm-events .region.region-content {
margin-top: -12px;
}
.page-local-events .page-header,
.page-webinars .page-header {
margin-top: 80px;
}
body.navbar-is-fixed-top.breadcrumbs.page-node-5424,
body.navbar-is-fixed-top.breadcrumbs,
body.navbar-is-fixed-top {
padding-top: 171px !important;
}
body.front.admin-menu .CiviPage {
margin-top: 60px;
}
.node-type-webform .page-header {
margin-top: 100px;
}
body.node-type-civicamp .region.region-content {
margin: 40px 0px -19px 0px;
}
body.admin-menu #flexslider-1 {
margin-top: 95px;
}
body.admin-menu.node-type-conference .region.region-content,
body.admin-menu.node-type-civicamp .region.region-content,
body.admin-menu.page-civicon #block-views-civicamp-block-4,
body.admin-menu.page-civicon #block-views-civicon-block-4 {
margin: -12px 0px -19px 0px !important;
} }
body.admin-menu.node-type-conference .region.region-content { .embed-responsive-4by3 {
margin: -1px 0px -19px 0px; padding-bottom: 75%;
} }
.page-node-4855 .CiviPage > section, .embed-responsive-16by9 {
.blog-listing .page-header { padding-bottom: 56.25%;
margin-top: 80px;
} }
.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
@media (max-width: 999px) { position: absolute;
body.admin-menu header#page-header { top: 0;
margin-top: -35px;} bottom: 0;
body.page-working-groups header#page-header { left: 0;
margin-top: 39px;} width: 100%;
body.admin-menu.page-working-groups header#page-header { height: 100%;
margin-top: 57px;} border: 0;
.navbar.fixed.scrollable,
.menu-name-menu-events-sub-menu ul,
.menu-name-menu-top-navigation ul {
top: 121px !important; }
body.admin-menu .navbar.fixed.scrollable,
body.admin-menu .menu-name-menu-events-sub-menu ul,
body.admin-menu .menu-name-menu-top-navigation ul {
top: 140px !important;}
}
.admin-menu.civicrm-events .region.region-content {
margin-top: -12px;
} }
/* GENERIC STYLES */ /* GENERIC STYLES */
...@@ -143,6 +100,17 @@ img.mid-circle { ...@@ -143,6 +100,17 @@ img.mid-circle {
float: left; float: left;
margin: 0px 10px 10px 0px; margin: 0px 10px 10px 0px;
} }
img.img-w-400 {
width: 400px;
height: auto;
}
img.img-h-150 {
height: 150px !important;
width: auto !important;
}
img.img-center {
margin: 0 auto;
}
.pane-title.light { .pane-title.light {
font-weight: 300; font-weight: 300;
font-size: 32px; font-size: 32px;
...@@ -155,7 +123,7 @@ img.mid-circle { ...@@ -155,7 +123,7 @@ img.mid-circle {
font-size: 150%; font-size: 150%;
} }
.capital { .capital {
text-transform: uppercase; text-transform: uppercase !important;
} }
.lower { .lower {
text-transform: inherit; text-transform: inherit;
...@@ -166,6 +134,17 @@ img.mid-circle { ...@@ -166,6 +134,17 @@ img.mid-circle {
.thick { .thick {
font-weight: 700; font-weight: 700;
} }
.border {
border-bottom: 1px solid #CCC;
padding-bottom: 10px;
margin-bottom: 16px;
}
p.credit {
font-size: 75%;
font-style: italic;
color: #555;
margin: 10px 0px;
}
h2.thin { h2.thin {
text-transform: inherit; text-transform: inherit;
font-size: 28px; font-size: 28px;
...@@ -196,7 +175,6 @@ a.full-width { ...@@ -196,7 +175,6 @@ a.full-width {
padding: 7px; padding: 7px;
margin: 7px 0; margin: 7px 0;
} }
h1.green-lead { h1.green-lead {
margin: 0 0 10px 0; margin: 0 0 10px 0;
color: #82c459; color: #82c459;
...@@ -223,6 +201,26 @@ a.bluebutton:active{ ...@@ -223,6 +201,26 @@ a.bluebutton:active{
background-color: #056085; background-color: #056085;
text-decoration: none; text-decoration: none;
} }
a.greenbutton {
background-color: #82c459;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 22px;
margin-bottom: 15px;
padding: 15px 30px;
cursor: pointer;
}
a.greenbutton:hover, a.greenbutton:active {
background-color: #64a13f;
background-image: none;
text-decoration: none;
color: #fff;
}
a.greenbutton.small {
font-size: 16px;
padding: 5px 30px;
}
/* COMMON TYPE ELEMENTS */ /* COMMON TYPE ELEMENTS */
...@@ -287,9 +285,7 @@ a.bluebutton:active{ ...@@ -287,9 +285,7 @@ a.bluebutton:active{
.field-name-field-register-here .field-item a, .field-name-field-register-here .field-item a,
.page-civicon .civicon-lead .links a, .page-civicon .civicon-lead .links a,
.page-civicon .view-grouping-content h3 > span > a, .page-civicon .view-grouping-content h3 > span > a,
.page-civicon .views-field-field-sponsorship-payment a, .page-civicon .views-field-field-sponsorship-payment a {
a.greenbutton,
.page-civicon a.event-register {
background-color: #82c459; background-color: #82c459;
border-radius: 3px; border-radius: 3px;
color: #fff; color: #fff;
...@@ -299,30 +295,28 @@ a.greenbutton, ...@@ -299,30 +295,28 @@ a.greenbutton,
padding: 15px 30px; padding: 15px 30px;
cursor: pointer; cursor: pointer;
} }
.page-civicon .civicon-lead a.full-details {
margin-right: 15px;
}
.field-name-field-register-link .field-item a:hover, .field-name-field-register-link .field-item a:hover,
.field-name-field-register-link .field-item a:active, .field-name-field-register-link .field-item a:active,
.field-name-field-full-details-link .field-item a:hover, .field-name-field-full-details-link .field-item a:hover,
.field-name-field-full-details-link .field-item a:active, .field-name-field-full-details-link .field-item a:active,
.field-name-field-register-here .field-item a:hover, .field-name-field-register-here .field-item a:hover,
.field-name-field-register-here .field-item a:active, .field-name-field-register-here .field-item a:active,
.page-civicon a.event-register:hover,
.page-civicon a.event-register:focus,
.page-civicon .civicon-lead a.full-details:hover,
.page-civicon .civicon-lead a.full-details:active,
.page-civicon .civicon-lead .links a:hover, .page-civicon .civicon-lead .links a:hover,
.page-civicon .civicon-lead .links a:active, .page-civicon .civicon-lead .links a:active,
.page-civicon .view-grouping-content h3 > span > a:hover, .page-civicon .view-grouping-content h3 > span > a:hover,
.page-civicon .view-grouping-content h3 > span > a:focus, .page-civicon .view-grouping-content h3 > span > a:focus,
.page-civicon .views-field-field-sponsorship-payment a:focus, .page-civicon .views-field-field-sponsorship-payment a:focus,
.page-civicon .views-field-field-sponsorship-payment a:hover, .page-civicon .views-field-field-sponsorship-payment a:hover {
a.greenbutton:hover, a.greenbutton:active {
background-color: #64a13f; background-color: #64a13f;
background-image: none; background-image: none;
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
} }
#block-service-links-service-links { #block-service-links-service-links {
margin-bottom: 15px; min-height: 130px;
} }
#block-service-links-service-links h2 { #block-service-links-service-links h2 {
font-size: 18px; font-size: 18px;
...@@ -433,6 +427,46 @@ a.greenbutton:hover, a.greenbutton:active { ...@@ -433,6 +427,46 @@ a.greenbutton:hover, a.greenbutton:active {
PAGE ELEMENTS PAGE ELEMENTS
***************/ ***************/
/* Navbar offset */
body section.main-body {
padding-top: 171px;
}
body section.main-body.with-subnav {
padding-top: 211px;
}
body.admin-menu section.main-body {
padding-top: 192px;
}
body.admin-menu section.main-body.with-subnav {
padding-top: 232px;
}
body, body.navbar-is-fixed-top.admin-menu.breadcrumbs,
body.navbar-is-fixed-top.breadcrumbs,
body.navbar-is-fixed-top.admin-menu,
body.navbar-is-fixed-top {
padding-top: 0px !important;
}
.flex-viewport {
top: 0px;
margin-bottom: 0;
}
body.admin-menu #flexslider-1,
.node-type-conference .region.region-content,
#flexslider-1 {
margin-top: 0px !important;
}
@media (max-width: 999px) {
body section.main-body,
body section.main-body.with-subnav {
padding-top: 121px;
}
body.admin-menu section.main-body,
body.admin-menu section.main-body.with-subnav {
padding-top: 99px;
}
}
/* Grey box sidebar */ /* Grey box sidebar */
div.pane-blog-taxonomy, div.cms { div.pane-blog-taxonomy, div.cms {
...@@ -442,15 +476,28 @@ div.pane-blog-taxonomy, div.cms { ...@@ -442,15 +476,28 @@ div.pane-blog-taxonomy, div.cms {
padding: 10px; padding: 10px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.grey-box {
float: right;
padding: 15px;
border: 1px solid #dedede;
background: #efefef;
border-radius: 4px;
margin-left: 10px;
text-align: left;
}
/* PAGE STRUCTURE */ /* PAGE STRUCTURE */
.page-header,
.page-header h1 {
margin-top: 0px !important;
}
section.main-body {
margin-bottom: 0px;
}
.CiviPage { .CiviPage {
margin-top: inherit; margin-top: inherit;
} }
.CiviPage > section:first-of-type {
margin-bottom: 20px;
}
.panel-panel.top { .panel-panel.top {
background-size: cover !important; background-size: cover !important;
} }
...@@ -482,23 +529,26 @@ div.pane-blog-taxonomy, div.cms { ...@@ -482,23 +529,26 @@ div.pane-blog-taxonomy, div.cms {
margin-top: 100px; margin-top: 100px;
} }
.stripe-black .crumbs-current-page { .stripe-black .crumbs-current-page {
display: none !important; display: none !important;
} }
.page-webinars .stripe-black, page-webinar .stripe-black, .page-webinars .stripe-black .breadcrumb,
.page-webinar .stripe-black .breadcrumb,
.civicrm-events .stripe-black, .civicrm-events .stripe-black,
.page-local-events .stripe-black, .page-local-events .stripe-black .breadcrumb,
.node-type-conference .stripe-black, .node-type-conference .stripe-black,
.page-civicon .stripe-black, .page-civicon .stripe-black,
.page-node-5424 .stripe-black, .page-node-5424 .stripe-black,
.page-node-5424 .page-header, .page-node-5424 .page-header,
.page-node-5424 .navbar-fixed-top .stripe-black, .page-node-5424 .navbar-fixed-top .stripe-black,
.page-providers .stripe-black, .page-providers .stripe-black .breadcrumb,
.banner .stripe-black, .banner .stripe-black,
.page-partners-contributors .stripe-black, .page-partners-contributors .stripe-black .breadcrumb,
.page-hosting-providers .stripe-black, .page-hosting-providers .stripe-black .breadcrumb,
.page-service-providers .stripe-black, .page-service-providers .stripe-black .breadcrumb,
.page-project-sponsors .stripe-black { .page-project-sponsors .stripe-black .breadcrumb,
display: none; .page-case-studies .stripe-black .breadcrumb,
.page-extensions .stripe-black .breadcrumb {
display: none;
} }
.page-working-groups .stripe-black, .page-working-groups .stripe-black,
.blog-listing .stripe-black, .blog-listing .stripe-black,
...@@ -648,117 +698,129 @@ header #navigation > ul.navbar-nav { ...@@ -648,117 +698,129 @@ header #navigation > ul.navbar-nav {
.top-primary-nav { .top-primary-nav {
font-size: 22px; font-size: 22px;
} }
@media all and (max-width:999px) {
#navbar ul li{ /* SUBNAV */
width: 100%;
} header #subnav {
.navbar-collapse.collapse { border-top: 1px solid #e6e5e5;
margin: 0;
padding: 0;
width: 100%;
}
.top-primary-nav, .top-secondary-nav {
width: 100%;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
border-color: #eee;
}
.open > .dropdown-menu {
border: medium none;
box-shadow: none;
display: block;
float: none;
position: static;
width: auto;
margin-left: 20px;
}
.open > .dropdown-menu li a {
line-height: 30px !important;
}
.navbar.fixed.scrollable, .menu-name-menu-events-sub-menu ul, .menu-name-menu-top-navigation ul {
top: 120px !important;
}
.navbar-collapse.collapse.main {
width: 100% !important;
margin-top: 0px;
}
section#block-menu-menu-top-navigation > ul {
margin: 0px;
}
header#page-header .menu-block-wrapper .nav > li a {
color: #635d5e;
font-size: 15px;
height: 40px;
line-height: 40px;
padding: 0 6px;
}
}
/* NAVBAR - THIRD SUBMENU */
.navbar.fixed.scrollable,
.menu-name-menu-events-sub-menu ul,
.menu-name-menu-top-navigation ul,
#page-header .menu-name-menu-primary-menu ul {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color -moz-use-text-color #e6e5e5;
border-color: #e6e5e5;
border-image: none;
border-style: none none solid;
border-width: medium medium 1px;
min-height: 0;
position: fixed;
text-align: center;
width: 100%;
top: inherit;
background-color: #fff;
z-index: 100;
}
.navbar.scrollable ul {
margin: 0;
padding: 0;
} }
.navbar.scrollable ul li { header #subnav .menu-block-wrapper .nav > li {
display: inline-block; display: inline-block;
list-style: outside none none; float: none;
}
header #subnav .menu-block-wrapper .nav {
text-align: center;
} }
.navbar.scrollable li a { header #subnav .menu-block-wrapper .nav > li a {
border-left: 1px solid #e6e5e5;
color: #635d5e; color: #635d5e;
display: block; font-size: 15px;
height: 50px; height: 40px;
line-height: 50px; line-height: 40px;
padding: 0 15px; padding: 0 20px;
} }
.navbar.scrollable li a:hover, header #subnav .menu-block-wrapper .nav > li a:hover,
.navbar.scrollable li a:active { header #subnav .menu-block-wrapper .nav > li a:focus,
header #subnav .menu-block-wrapper .nav > li.active a,
header #subnav .menu-block-wrapper .nav > li a.active-trail {
color: #82c459; color: #82c459;
text-decoration: none; background-color: transparent
} }
.navbar.scrollable li:last-child a { .navbar.fixed.scrollable, .menu-name-menu-events-sub-menu ul, .menu-name-menu-top-navigation ul, #page-header .menu-name-menu-primary-menu ul {
border-right: 1px solid #e6e5e5; border-color: transparent;
} }
header#page-header .menu-block-wrapper .nav > li {
display: inline-block; /* MOBILE/TABLET MENU */
@media all and (max-width:999px) {
#navbar ul li{
width: 100%;
} }
header#page-header .menu-block-wrapper .nav { .navbar-collapse.collapse {
text-align: center; margin: 0;
padding: 0;
width: 100%;
}
.top-primary-nav, .top-secondary-nav {
width: 100%;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
border-color: #eee;
} }
header#page-header .menu-block-wrapper .nav > li a { .open > .dropdown-menu {
border: medium none;
box-shadow: none;
display: block;
float: none;
position: static;
width: auto;
margin-left: 20px;
}
.open > .dropdown-menu li a {
line-height: 30px !important;
}
.navbar-collapse.collapse.main {
width: 100% !important;
margin-top: 0px;
}
section#block-menu-menu-top-navigation > ul {
margin: 0px;
}
header#page-header .menu-block-wrapper .nav > li a {
color: #635d5e; color: #635d5e;
font-size: 15px; font-size: 15px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
padding: 0 20px; padding: 0 6px;
}
#topbar {
background-color: #dedede;
}
header#navbar {
display: flex;
flex-direction: column;
}
#mainnav.container,
#topbar .container,
#subnav .container {
width: 100%;
}
.container>.navbar-header,
#navbar ul li a {
margin: 0px;
}
header #subnav .menu-block-wrapper .nav > li a {
font-size: 16px;
}
#navbar ul li a {
text-align: center;
padding: 0px;
height: 40px;
line-height: 40px;
font-size: 18px;
}
section#block-menu-menu-top-navigation > ul {
width: 100%;
}
#mainnav {
order: 1;
}
#topbar {
order: 2;
background-color: #eee;
}
#subnav {
order: 3;
}
.open > .dropdown-menu {
padding: 0px;
margin-left: 0px;
}
.navbar-collapse.in {
overflow: hidden;
max-height: none !important;
height: auto !important;
} }
header#page-header .menu-block-wrapper .nav > li a:hover,
header#page-header .menu-block-wrapper .nav > li a:focus,
header#page-header .menu-block-wrapper .nav > li.active a,
header#page-header .menu-block-wrapper .nav > li a.active-trail {
color: #82c459;
background-color: transparent
} }
/************* /*************
...@@ -1101,16 +1163,12 @@ a.feature-box:hover{ ...@@ -1101,16 +1163,12 @@ a.feature-box:hover{
.civicrm-events .page-header h1 { .civicrm-events .page-header h1 {
display: none; display: none;
} }
.civicrm-events .region.region-content {
margin-top: -1px;
}
.
.civicrm-events .row-stripe-white > *{ .civicrm-events .row-stripe-white > *{
margin: 0; margin: 0;
} }
.civicrm-events #white { .civicrm-events #white {
background: #eee none repeat scroll 0 0; background: #eee none repeat scroll 0 0;
padding: 110px 0px 60px 0px; padding: 70px 0px 60px 0px;
} }
.civicrm-events .tabs--primary { .civicrm-events .tabs--primary {
margin-bottom: 0px;