Commit c9a15af4 authored by maikelkoopman's avatar maikelkoopman
Browse files

DS-2906 by maikelkoopman: make navbar colors configurable and move colors to css file

parent 9d726bd9
[type=\"radio\"]:checked + label:before {
border-color: #1f80aa;
}
[type=\"radio\"]:checked + label:after {
border-color: #1f80aa;
background-color: #1f80aa;
}
[type=\"radio\"]:checked + label {
color: #1f80aa;
}
.dropdown-toggle.btn-primary:hover {
background-color: #29abe2;
border-color: #29abe2;
}
.nav-tabs:not(.brand-secondary) > li.active > a, .nav-tabs:not(.brand-secondary) .nav-tabs > li.active > a:hover, .nav-tabs:not(.brand-secondary) .nav-tabs > li.active > a:focus, .card__link {
color: #29abe2;
}
.nav-tabs:not(.brand-secondary) > li.active > a, .nav-tabs:not(.brand-secondary) > li.active > a:hover, .nav-tabs:not(.brand-secondary) > li.active > a:focus {
border-right-color: #29abe2;
}
.nav-tabs.brand-primary a:hover, .nav-tabs.brand-primary a:focus, .brand-primary > .nav-tabs a:hover, .brand-primary > .nav-tabs a:focus, .nav-tabs.brand-secondary a:hover, .nav-tabs.brand-secondary a:focus, .brand-secondary > .nav-tabs a:hover, .brand-secondary > .nav-tabs a:focus {
border-bottom-color: transparent;
}
.read-indicator,
.select2-container--social .select2-results__option--highlighted[aria-selected],
.select2-container--social .select2-results__option[aria-selected=true],
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
background-color: #29abe2;
}
.hero-form[role='search'] .form-control:focus, .hero-form[role='search'] .form-control:active,
.hero-form[role='search'] .form-control:focus ~ .search-icon,
.hero-form[role='search'] .form-control:active ~ .search-icon {
-webkit-box-shadow: 0 2px 0 0 #1f80aa;
box-shadow: 0 2px 0 0 #1f80aa;
}
.hero-form[role='search'] .search-icon {
fill: #29abe2;
}
.form-control:focus {
border-color: #29abe2;
-webkit-box-shadow: 0 2px 0 0 #29abe2;
box-shadow: 0 2px 0 0 #29abe2;
}
.select2-container--social.select2-container--focus .select2-selection, .select2-container--social.select2-container--open .select2-selection, .select2-container--social .select2-dropdown {
border-color: #29abe2;
}
.brand-secondary {
background-color: #1f80aa;
border-color: #1f80aa;
}
.badge-secondary {
background-color: #1f80aa;
}
.badge-accent {
background-color: #ffc142;
}
.nav-tabs.brand-primary a:hover, .nav-tabs.brand-primary a:focus, .brand-primary > .nav-tabs a:hover, .brand-primary > .nav-tabs a:focus, .nav-tabs.brand-secondary a:hover, .nav-tabs.brand-secondary a:focus, .brand-secondary > .nav-tabs a:hover, .brand-secondary > .nav-tabs a:focus {
background-color: rgba(0, 0, 0, 0.5);
}
.btn-primary {
background-color: #29abe2;
border-color: #29abe2;
}
.btn-accent {
background-color: #ffc142;
border-color: #ffc142;
}
.btn-flat,
.btn-link,
.btn-link:hover,
.btn-flat:hover,
.btn-link:focus,
.btn-flat:focus,
.card__link,
.card__link:focus,
.card__link:hover,
.view--who-liked .views-field-view-user a,
.comment__reply-btn,
.body-text a,
.body-text a:hover,
.book-menu .list-item--active-trail > a {
color: #29abe2;
fill: #29abe2;
}
.list-item--active, .list-item--active:hover, .list-item--active:focus,
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus,
[type=\"checkbox\"]:checked + label:after {
background-color: #1f80aa;
border-color: #1f80aa;
}
.stream-icon-new {
background-color: #1f80aa;
}
blockquote {
border-left-color: #29abe2;
}
.input-group .form-control:focus ~ .input-group-addon {
border-color: #29abe2;
-webkit-box-shadow: 0 2px 0 0 #29abe2;
box-shadow: 0 2px 0 0 #29abe2;
}
.site-footer,
.cover {
background-color: #29abe2;
}
.navbar-secondary {
color: #f9f9f9;
background-color: #1f7ea7;
}
.navbar-secondary .navbar-nav a {
color: #f9f9f9;
}
.navbar-secondary .navbar-nav li.active a {
border-bottom-color: #f9f9f9;
}
.navbar-scrollable:before {
background: -webkit-gradient(linear, left top, right top, from(#1f7ea7), to(transparent));
background: linear-gradient(90deg, #1f7ea7, transparent);
}
.navbar-scrollable:after {
background: -webkit-gradient(linear, right top, left top, from(#1f7ea7), to(transparent));
background: linear-gradient(-90deg, #1f7ea7, transparent);
}
.ui-datepicker-calendar > tbody > tr > td .ui-state-active {
background-color: #1f80aa;
}
.navbar-default {
background-color: #333333;
}
.navbar-default .navbar-toggle {
color: #ffffff;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
color: #1a8dbe;
background-color: #f3f3f3;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
fill: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #1a8dbe;
background-color: #f3f3f3;
}
.navbar-default .navbar-nav > li > a:hover .navbar-nav__icon, .navbar-default .navbar-nav > li > a:focus .navbar-nav__icon {
fill: #1a8dbe;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
background-color: #f3f3f3;
color: #1a8dbe;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #1a8dbe;
fill: #1a8dbe;
background-color: #f3f3f3;
}
.navbar-nav__icon {
fill: #ffffff;
}
.navbar__open-search-block {
background-color: #333333;
}
@media (min-width: 900px) {
.search-take-over .form-text {
color: #ffffff;
}
.search-take-over .form-text:focus {
border-color: #ffffff;
-webkit-box-shadow: 0 2px 0 0 #ffffff;
box-shadow: 0 2px 0 0 #ffffff;
}
.btn--close-search-take-over svg {
fill: #ffffff;
}
}
@media (max-width: 899px) {
.navbar-collapse .dropdown-menu li a {
color: #ffffff;
}
.navbar-collapse .dropdown-menu li a:hover, .navbar-collapse .dropdown-menu li a:focus {
color: #1a8dbe;
background-color: #f3f3f3;
}
}
......@@ -8,7 +8,7 @@
.btn-default {
color: #4d4d4d;
background-color: white;
background-color: #ffffff;
border-color: #adadad;
fill: #4d4d4d;
}
......@@ -45,32 +45,32 @@
fieldset[disabled] .btn-default:hover,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default.focus {
background-color: white;
background-color: #ffffff;
border-color: #adadad;
}
.btn-primary {
color: white;
color: #ffffff;
background-color: #29abe2;
border-color: #29abe2;
fill: white;
fill: #ffffff;
}
.btn-primary:focus, .btn-primary.focus {
color: white;
color: #ffffff;
background-color: #1a8dbe;
border-color: #115b7b;
}
.btn-primary:hover {
color: white;
color: #ffffff;
background-color: #1a8dbe;
border-color: #1987b5;
}
.btn-primary:active, .btn-primary.active,
.open > .btn-primary.dropdown-toggle {
color: white;
color: #ffffff;
background-color: #1a8dbe;
border-color: #1987b5;
}
......@@ -79,7 +79,7 @@ fieldset[disabled] .btn-default.focus {
.open > .btn-primary.dropdown-toggle:hover,
.open > .btn-primary.dropdown-toggle:focus,
.open > .btn-primary.dropdown-toggle.focus {
color: white;
color: #ffffff;
background-color: #16769f;
border-color: #115b7b;
}
......
......@@ -3,7 +3,7 @@
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
background-color: white;
background-color: #ffffff;
}
.card__title {
......
.ui-datepicker {
background-color: #fff;
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 10px;
......
......@@ -25,7 +25,6 @@
.hero-form[role='search'] .form-control:focus, .hero-form[role='search'] .form-control:active,
.hero-form[role='search'] .form-control:focus ~ .search-icon,
.hero-form[role='search'] .form-control:active ~ .search-icon {
border-bottom: 1px solid #1f80aa;
-webkit-box-shadow: 0 2px 0 0 #1f80aa;
box-shadow: 0 2px 0 0 #1f80aa;
}
......
......@@ -11,27 +11,13 @@
color: #777;
}
.navbar-toggle {
border-radius: 10px;
}
.navbar-default {
background-color: #333333;
border-color: white;
}
.navbar-default .navbar-brand {
color: white;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #e6e6e6;
background-color: #1d789e;
}
.navbar-default .navbar-nav > li > a {
color: white;
fill: white;
color: #ffffff;
fill: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
......@@ -40,10 +26,15 @@
background-color: #1a8dbe;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white;
fill: white;
background-color: #0d0d0d;
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a.is-active,
.navbar-default .navbar-nav > li > a.is-active:hover,
.navbar-default .navbar-nav > li > a.is-active:focus {
color: #1a8dbe;
fill: #1a8dbe;
background-color: #f3f3f3;
}
.navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus {
......@@ -67,23 +58,25 @@
font-weight: 500;
}
.navbar-default .dropdown-menu > .active > a, .navbar-default .dropdown-menu > .active > a:hover, .navbar-default .dropdown-menu > .active > a:focus {
background-color: #1f80aa;
color: #fff;
.navbar-default .dropdown-menu > li > a.is-active:hover, .navbar-default .dropdown-menu > li > a.is-active:focus {
cursor: default;
}
.navbar-default .navbar-toggle {
border-radius: 0;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #222222;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: white;
.navbar-default .navbar-collapse {
border-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
background-color: #0d0d0d;
color: white;
background-color: #f3f3f3;
color: #1a8dbe;
}
.navbar-default .dropdown img {
......@@ -106,10 +99,22 @@
background: rgba(51, 51, 51, 0.95);
}
.navbar-nav__icon {
fill: #ffffff;
}
.navbar-secondary {
background-color: #1f80aa;
}
.navbar-secondary .navbar-nav a {
color: #fff;
}
.navbar-secondary .navbar-nav li.active a {
border-bottom-color: #fff;
}
.navbar-secondary .navbar-nav li:not(.active) a:hover,
.navbar-secondary .navbar-nav li:not(.active) a:focus {
outline: none;
......@@ -123,24 +128,27 @@
}
@media (min-width: 900px) {
.search-take-over .form-text {
color: #ffffff;
}
.search-take-over .form-text:focus {
border-color: #fff;
-webkit-box-shadow: 0 2px 0 0 #fff;
box-shadow: 0 2px 0 0 #fff;
border-color: #ffffff;
-webkit-box-shadow: 0 2px 0 0 #ffffff;
box-shadow: 0 2px 0 0 #ffffff;
}
}
@media (max-width: 599px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: white;
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #e6e6e6;
background-color: #1a8dbe;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: white;
background-color: #0d0d0d;
color: #1a8dbe;
background-color: #f3f3f3;
}
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #ccc;
......@@ -150,7 +158,7 @@
@media (max-width: 899px) {
.navbar-collapse .dropdown-menu li a {
color: white;
color: #ffffff;
}
.navbar-collapse .dropdown-menu li a:hover, .navbar-collapse .dropdown-menu li a:focus {
background-color: #1f80aa;
......@@ -163,7 +171,7 @@
background-color: #f5f5f5;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #fff;
color: #ffffff;
background-color: #1f80aa;
}
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
......
.ui-timepicker-wrapper {
background-color: #fff;
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 10px;
......
......@@ -8,24 +8,43 @@
$info = [
// Available colors and color labels used in theme.
'fields' => [
'brand-bg-primary' => t('Primary color'),
'brand-bg-secondary' => t('Secondary color'),
'brand-bg-accent' => t('Accent color'),
'brand-text-primary' => t('Link color'),
'brand-primary' => t('Primary color'),
'brand-secondary' => t('Secondary color'),
'brand-accent' => t('Accent color'),
'brand-link' => t('Link color'),
'navbar-bg' => t('Navigation background'),
'navbar-text' => t('Navigation text'),
'navbar-active-bg' => t('Navigation active item background'),
'navbar-active-text' => t('Navigation active item text'),
'navbar-sec-bg' => t('Section navbar background'),
'navbar-sec-text' => t('Section navbar text'),
],
// Pre-defined color schemes.
// Do not use the same color twice as the color module does not
// know which values to replace then. Make sure all colors match with
// the colors in the css file below.
'schemes' => [
'default' => [
'title' => t('Social Blue (default)'),
'colors' => [
'brand-bg-primary' => '#29abe2',
'brand-bg-secondary' => '#1f80aa',
'brand-bg-accent' => '#ffc142',
'brand-text-primary' => '#33b5e5',
'brand-primary' => '#29abe2',
'brand-secondary' => '#1f80aa',
'brand-accent' => '#ffc142',
'brand-link' => '#33b5e5',
'navbar-bg' => '#333333',
'navbar-text' => '#ffffff',
'navbar-active-bg' => '#1a8dbe',
'navbar-active-text' => '#f3f3f3',
'navbar-sec-bg' => '#1f7ea7',
'navbar-sec-text' => '#f9f9f9',
],
],
],
'css' => array(
'assets/css/brand.css',
),
// Files to copy.
'copy' => [
'logo.svg',
......@@ -60,7 +79,7 @@ $info = [
'drupalSettings' => [
'color' => [
// Put the logo path into JavaScript for the live preview.
'logo' => theme_get_setting('logo.url', 'socialblue'),
'logo' => theme_get_setting('logo.url', $theme),
],
],
],
......
<div class="color-preview">
<div class="color-preview-header">
<div class="color-preview-logo"><img src="../../../core/themes/bartik/logo.svg" alt="Site Logo" /></div>
<div class="color-preview-site-name">Bartik</div>
<div class="color-preview-main-menu">
<ul class="color-preview-main-menu-links">
<li><a>Home</a></li>
<li><a>Te Quidne</a></li>
<li><a>Vel Torqueo Quae Erat</a></li>
</ul>
</div>
<nav class="navbar navbar-default" role="banner">
<div class="container container--navbar">
<div class="block-system-branding-block navbar-header">
<a class="navbar-brand" href="/" title="Home" rel="home">
<img src="/sites/themes/files/color/socialblue-85f09485/logo.svg" alt="Open Social">
</a>
<button href="#" data-toggle="collapse" data-target="#main-navigation" type="button" aria-expanded="false" class="navbar-toggle collapsed">
<span>Menu</span>
<span class="sr-only">
Toggle navigation </span>
</button>
</div>
<div id="main-navigation" class="collapse navbar-collapse">
<div class="navbar-search">
<form class="search-content-form clearfix search-take-over" data-drupal-selector="search-content-form" novalidate="novalidate" role="search" action="/" method="post" id="search-content-form" accept-charset="UTF-8" data-drupal-form-fields="edit-search-input-content,edit-submit">
<div class="form-group">
<button class="btn--close-search-take-over" type="button">
<svg class="icon-search-form-close">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-close"></use>
</svg>
</button>
<input data-drupal-selector="edit-search-input-content" class="form-text form-control" placeholder="What are you looking for ?" autocomplete="off" type="text" id="edit-search-input-content" name="search_input_content" value="" size="60" maxlength="128">
<button data-drupal-selector="edit-submit" class="button js-form-submit form-submit btn js-form-submit" type="submit" id="edit-submit" name="op" value="Search Content">Search Content</button>
</div>
</form>
</div>
<ul class="menu nav navbar-nav">
<li>
<a href="/" class="is-active">Home</a>
</li>
<li class="expanded dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Explore <span class="caret"></span></a>
<ul class="menu dropdown-menu">
<li>
<a href="#">Community</a>
</li>
<li>
<a href="#">All groups</a>
</li>
<li>
<a href="#">All events</a>
</li>
<li>
<a href="#">All topics</a>
</li>
<li>
<a href="#">All members</a>
</li>
</ul>
</li>
</ul>
<div class="navbar__open-search-control">
<button class="navbar__open-search-block" rel="search" title="Click to open search box">
</button>
<svg class="navbar-nav__icon navbar-nav__icon--search">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
</svg>
</div>
</div>
</div>
</nav>
</div>