Skip to content

GitLab

CiviCRM Website
CiviCRM Website
Commit 57d90128 authored by Nic's avatar Nic Committed by Aegir user
Browse files
Options

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

parent 708870ad
Hide whitespace changes
Inline Side-by-side
Showing with 542 additions and 395 deletions
themes/civicrm_bootstrap/civicrm_bootstrap.info
View file @ 57d90128
......@@ -11,6 +11,7 @@ base theme = bootstrap
regions[topnav] = 'Top Navigation'
regions[navigation] = 'Navigation'
regions[subnav] = 'Sub Navigation'
regions[header] = 'Header'
regions[help] = 'Help'
regions[content] = 'Content'
......
themes/civicrm_bootstrap/css/new.css
View file @ 57d90128
......@@ -25,7 +25,7 @@
*****************************************************************/
/*************
CORE TYPE
CORE TYPOGRAPHY
***************/
/* Imports */
......@@ -33,72 +33,29 @@
@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';
/* SPACING FIXES */
/* Missing Bootstrap responsive code */
.page-header h1,
.page-node .page-header,
.page-header {
margin-top: 0px;
}
body.admin-menu header#page-header {
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;
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
body.admin-menu.node-type-conference .region.region-content {
margin: -1px 0px -19px 0px;
.embed-responsive-4by3 {
padding-bottom: 75%;
}
.page-node-4855 .CiviPage > section,
.blog-listing .page-header {
margin-top: 80px;
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
@media (max-width: 999px) {
body.admin-menu header#page-header {
margin-top: -35px;}
body.page-working-groups header#page-header {
margin-top: 39px;}
body.admin-menu.page-working-groups header#page-header {
margin-top: 57px;}
.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;
.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* GENERIC STYLES */
......@@ -143,6 +100,17 @@ img.mid-circle {
float: left;
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 {
font-weight: 300;
font-size: 32px;
......@@ -155,7 +123,7 @@ img.mid-circle {
font-size: 150%;
}
.capital {
text-transform: uppercase;
text-transform: uppercase !important;
}
.lower {
text-transform: inherit;
......@@ -166,6 +134,17 @@ img.mid-circle {
.thick {
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 {
text-transform: inherit;
font-size: 28px;
......@@ -196,7 +175,6 @@ a.full-width {
padding: 7px;
margin: 7px 0;
}
h1.green-lead {
margin: 0 0 10px 0;
color: #82c459;
......@@ -223,6 +201,26 @@ a.bluebutton:active{
background-color: #056085;
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 */
......@@ -287,9 +285,7 @@ a.bluebutton:active{
.field-name-field-register-here .field-item a,
.page-civicon .civicon-lead .links a,
.page-civicon .view-grouping-content h3 > span > a,
.page-civicon .views-field-field-sponsorship-payment a,
a.greenbutton,
.page-civicon a.event-register {
.page-civicon .views-field-field-sponsorship-payment a {
background-color: #82c459;
border-radius: 3px;
color: #fff;
......@@ -299,30 +295,28 @@ a.greenbutton,
padding: 15px 30px;
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:active,
.field-name-field-full-details-link .field-item a:hover,
.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: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,
.field-name-field-register-here .field-item a:active,
.page-civicon .civicon-lead .links a:hover,
.page-civicon .civicon-lead .links a:active,
.page-civicon .view-grouping-content h3 > span > a:hover,
.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:hover,
a.greenbutton:hover, a.greenbutton:active {
.page-civicon .views-field-field-sponsorship-payment a:hover {
background-color: #64a13f;
background-image: none;
text-decoration: none;
color: #fff;
}
#block-service-links-service-links {
margin-bottom: 15px;
min-height: 130px;
}
#block-service-links-service-links h2 {
font-size: 18px;
......@@ -433,6 +427,46 @@ a.greenbutton:hover, a.greenbutton:active {
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 */
div.pane-blog-taxonomy, div.cms {
......@@ -442,15 +476,28 @@ div.pane-blog-taxonomy, div.cms {
padding: 10px;
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-header,
.page-header h1 {
margin-top: 0px !important;
}
section.main-body {
margin-bottom: 0px;
}
.CiviPage {
margin-top: inherit;
}
.CiviPage > section:first-of-type {
margin-bottom: 20px;
}
.panel-panel.top {
background-size: cover !important;
}
......@@ -482,23 +529,26 @@ div.pane-blog-taxonomy, div.cms {
margin-top: 100px;
}
.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,
.page-local-events .stripe-black,
.page-local-events .stripe-black .breadcrumb,
.node-type-conference .stripe-black,
.page-civicon .stripe-black,
.page-node-5424 .stripe-black,
.page-node-5424 .page-header,
.page-node-5424 .navbar-fixed-top .stripe-black,
.page-providers .stripe-black,
.page-providers .stripe-black .breadcrumb,
.banner .stripe-black,
.page-partners-contributors .stripe-black,
.page-hosting-providers .stripe-black,
.page-service-providers .stripe-black,
.page-project-sponsors .stripe-black {
display: none;
.page-partners-contributors .stripe-black .breadcrumb,
.page-hosting-providers .stripe-black .breadcrumb,
.page-service-providers .stripe-black .breadcrumb,
.page-project-sponsors .stripe-black .breadcrumb,
.page-case-studies .stripe-black .breadcrumb,
.page-extensions .stripe-black .breadcrumb {
display: none;
}
.page-working-groups .stripe-black,
.blog-listing .stripe-black,
......@@ -648,117 +698,129 @@ header #navigation > ul.navbar-nav {
.top-primary-nav {
font-size: 22px;
}
@media all and (max-width:999px) {
#navbar ul li{
width: 100%;
}
.navbar-collapse.collapse {
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;
/* SUBNAV */
header #subnav {
border-top: 1px solid #e6e5e5;
}
.navbar.scrollable ul li {
header #subnav .menu-block-wrapper .nav > li {
display: inline-block;
list-style: outside none none;
float: none;
}
header #subnav .menu-block-wrapper .nav {
text-align: center;
}
.navbar.scrollable li a {
border-left: 1px solid #e6e5e5;
header #subnav .menu-block-wrapper .nav > li a {
color: #635d5e;
display: block;
height: 50px;
line-height: 50px;
padding: 0 15px;
font-size: 15px;
height: 40px;
line-height: 40px;
padding: 0 20px;
}
.navbar.scrollable li a:hover,
.navbar.scrollable li a:active {
header #subnav .menu-block-wrapper .nav > li a:hover,
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;
text-decoration: none;
background-color: transparent
}
.navbar.scrollable li:last-child a {
border-right: 1px solid #e6e5e5;
.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-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 {
text-align: center;
.navbar-collapse.collapse {
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;
font-size: 15px;
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{
.civicrm-events .page-header h1 {
display: none;
}
.civicrm-events .region.region-content {
margin-top: -1px;
}
.
.civicrm-events .row-stripe-white > *{
margin: 0;
}
.civicrm-events #white {
background: #eee none repeat scroll 0 0;
padding: 110px 0px 60px 0px;
padding: 70px 0px 60px 0px;
}
.civicrm-events .tabs--primary {
margin-bottom: 0px;
......@@ -1208,7 +1266,7 @@ a.feature-box:hover{
.view-webinar .table>tbody>tr>td.active,
.page-local-events .view-local-events .table>tbody>tr>td.active {
border: 0px solid tranpsarent;
background: #eee;
background: #eee;
}
.view-webinar .views-field-title,
.page-local-events .view-local-events .views-field-title
......@@ -1250,7 +1308,6 @@ a.feature-box:hover{
.node-type-conference .pane-node-field-date-teaser-line,
.node-type-conference .pane-node-title,
.node-type-conference .pane-node-field-conference-teaser-line,
.node-type-conference .pane-node-field-register-link,
.node-type-conference .pane-node-field-register-link {
position: absolute;
width: 100%;
......@@ -1305,6 +1362,7 @@ a.feature-box:hover{
top: 320px;
width: 210px;
margin: 0 auto;
position: relative;
}
.pane-node-field-full-details-link {
width: 190px;
......@@ -1326,7 +1384,7 @@ a.feature-box:hover{
content: "";
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.25);
background-color: rgba(0,0,0,0.4);
z-index; 10;
}
.node-type-conference .field-name-field-image-credit {
......@@ -1341,19 +1399,6 @@ a.feature-box:hover{
.node-type-conference .pane-node-field-event-start-date {
margin-top: 15px;
}
@media (max-width: 800px) {
.node-type-conference .field-name-field-header-image img {
height: 420px;
}
.node-type-conference .panel-panel.top {
min-height: 420px;
}
}
@media (max-width: 999px) {
.node-type-conference .region.region-content {
margin: -1px 0px -19px 0px;
}
}
@media (max-width:1200px) {
.node-type-conference .field-name-field-logo {
width: 40%;
......@@ -1362,7 +1407,6 @@ a.feature-box:hover{
background-size: cover !important;
}
}
.page-civicon .civicon-lead {