Commit 89102f1d authored by rolki's avatar rolki Committed by navneet0693
Browse files

Issue #3229069: As an SM a want to have the ability to switch header style to multi lines

parent 5cbcd04e
......@@ -276,29 +276,107 @@ blockquote {
background-color: #1f1f1f;
}
.navbar-default.navbar-second-line {
background-color: #004494;
}
.navbar-default.navbar-second-line .navbar-nav > li > a,
.navbar-default.navbar-second-line .navbar-nav > li > button {
color: #fffff1;
fill: #fffff1;
}
.navbar-default.navbar-second-line .navbar-nav > li > a:hover, .navbar-default.navbar-second-line .navbar-nav > li > a:focus,
.navbar-default.navbar-second-line .navbar-nav > li > button:hover,
.navbar-default.navbar-second-line .navbar-nav > li > button:focus {
color: #002f67;
background-color: #f2f5f9;
}
.navbar-default.navbar-second-line .navbar-nav > li > a:hover .navbar-nav__icon, .navbar-default.navbar-second-line .navbar-nav > li > a:focus .navbar-nav__icon,
.navbar-default.navbar-second-line .navbar-nav > li > button:hover .navbar-nav__icon,
.navbar-default.navbar-second-line .navbar-nav > li > button:focus .navbar-nav__icon {
fill: #002f67;
}
.navbar-default.navbar-second-line .navbar-nav > .open > a, .navbar-default.navbar-second-line .navbar-nav > .open > a:hover, .navbar-default.navbar-second-line .navbar-nav > .open > a:focus,
.navbar-default.navbar-second-line .navbar-nav > .open > button,
.navbar-default.navbar-second-line .navbar-nav > .open > button:hover,
.navbar-default.navbar-second-line .navbar-nav > .open > button:focus {
background-color: #f2f5f9;
color: #002f67;
}
.navbar-default.navbar-second-line .navbar-nav > li > a.is-active, .navbar-default.navbar-second-line .navbar-nav > li > a.is-active:hover, .navbar-default.navbar-second-line .navbar-nav > li > a.is-active:focus,
.navbar-default.navbar-second-line .navbar-nav > li > button.is-active,
.navbar-default.navbar-second-line .navbar-nav > li > button.is-active:hover,
.navbar-default.navbar-second-line .navbar-nav > li > button.is-active:focus,
.navbar-default.navbar-second-line .navbar-nav > .active > a,
.navbar-default.navbar-second-line .navbar-nav > .active > a:hover,
.navbar-default.navbar-second-line .navbar-nav > .active > a:focus,
.navbar-default.navbar-second-line .navbar-nav > .active > button,
.navbar-default.navbar-second-line .navbar-nav > .active > button:hover,
.navbar-default.navbar-second-line .navbar-nav > .active > button:focus {
color: #002f67;
fill: #002f67;
background-color: #f2f5f9;
}
.navbar-default.navbar-second-line .navbar-nav > .dropdown > .dropdown-menu {
background-color: #f2f5f9;
}
.navbar-default.navbar-second-line .navbar-nav > .dropdown > .dropdown-menu a {
color: #002f67;
}
.navbar-default.navbar-second-line .navbar-nav__icon {
fill: #fffff1;
}
.header-top {
background-color: #333333;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > button {
.navbar-default .navbar-nav > li > button,
.header-top .navbar-nav > li > a,
.header-top .navbar-nav > li > button {
color: #ffffff;
fill: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > button:hover,
.navbar-default .navbar-nav > li > button:focus {
.navbar-default .navbar-nav > li > button:focus,
.header-top .navbar-nav > li > a:hover,
.header-top .navbar-nav > li > a:focus,
.header-top .navbar-nav > li > button:hover,
.header-top .navbar-nav > li > button:focus {
color: #f3f3f3;
background-color: #1f1f1f;
}
.navbar-default .navbar-nav > li > a:hover .navbar-nav__icon, .navbar-default .navbar-nav > li > a:focus .navbar-nav__icon,
.navbar-default .navbar-nav > li > button:hover .navbar-nav__icon,
.navbar-default .navbar-nav > li > button:focus .navbar-nav__icon {
.navbar-default .navbar-nav > li > button:focus .navbar-nav__icon,
.header-top .navbar-nav > li > a:hover .navbar-nav__icon,
.header-top .navbar-nav > li > a:focus .navbar-nav__icon,
.header-top .navbar-nav > li > button:hover .navbar-nav__icon,
.header-top .navbar-nav > li > button:focus .navbar-nav__icon {
fill: #f3f3f3;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > button,
.navbar-default .navbar-nav > .open > button:hover,
.navbar-default .navbar-nav > .open > button:focus {
.navbar-default .navbar-nav > .open > button:focus,
.header-top .navbar-nav > .open > a,
.header-top .navbar-nav > .open > a:hover,
.header-top .navbar-nav > .open > a:focus,
.header-top .navbar-nav > .open > button,
.header-top .navbar-nav > .open > button:hover,
.header-top .navbar-nav > .open > button:focus {
background-color: #1f1f1f;
color: #f3f3f3;
}
......@@ -312,12 +390,56 @@ blockquote {
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > button,
.navbar-default .navbar-nav > .active > button:hover,
.navbar-default .navbar-nav > .active > button:focus {
.navbar-default .navbar-nav > .active > button:focus,
.header-top .navbar-nav > li > a.is-active,
.header-top .navbar-nav > li > a.is-active:hover,
.header-top .navbar-nav > li > a.is-active:focus,
.header-top .navbar-nav > li > button.is-active,
.header-top .navbar-nav > li > button.is-active:hover,
.header-top .navbar-nav > li > button.is-active:focus,
.header-top .navbar-nav > .active > a,
.header-top .navbar-nav > .active > a:hover,
.header-top .navbar-nav > .active > a:focus,
.header-top .navbar-nav > .active > button,
.header-top .navbar-nav > .active > button:hover,
.header-top .navbar-nav > .active > button:focus {
color: #f3f3f3;
fill: #f3f3f3;
background-color: #1f1f1f;
}
.navbar-second-line + main .search-take-over .form-text,
.navbar-second-line + main .search-take-over svg {
color: #fffff1;
fill: #fffff1;
}
.navbar-second-line + main .search-take-over .form-text::-webkit-input-placeholder {
color: #fffff1 !important;
}
.navbar-second-line + main .search-take-over .form-text::-moz-placeholder {
color: #fffff1 !important;
}
.navbar-second-line + main .search-take-over .form-text:-ms-input-placeholder {
color: #fffff1 !important;
}
.navbar-second-line + main .search-take-over .form-text:-moz-placeholder {
color: #fffff1 !important;
}
.navbar-second-line + main .search-take-over .form-text:focus {
border-color: #fffff1;
-webkit-box-shadow: 0 2px 0 0 #fffff1;
box-shadow: 0 2px 0 0 #fffff1;
}
.navbar-second-line + main .search--with-suggestions .spinner > div {
background-color: #fffff1;
}
html:not(.js) .navbar-default .dropdown:focus > a,
html:not(.js) .navbar-default .dropdown:focus > button, html:not(.js) .navbar-default .dropdown:hover > a,
html:not(.js) .navbar-default .dropdown:hover > button {
......@@ -373,6 +495,10 @@ html:not(.js) .navbar-default .dropdown:hover > button .navbar-nav__icon {
background-color: #333333;
}
.navbar-second-line .navbar__open-search-block {
background-color: #004494;
}
.search--with-suggestions .spinner > div {
background-color: #ffffff;
}
......@@ -441,6 +567,33 @@ html:not(.js) .navbar-default .dropdown:hover > button .navbar-nav__icon {
fill: #f3f3f3;
}
.navbar-second-line .social-gtranslate-list--desktop > a {
color: #fffff1;
background-color: #004494;
}
.navbar-second-line .social-gtranslate-list--desktop > a:after {
color: #fffff1;
}
.navbar-second-line .social-gtranslate-list--desktop > a .select-icon {
fill: #fffff1;
}
.navbar-second-line .social-gtranslate-list--desktop > a:focus, .navbar-second-line .social-gtranslate-list--desktop > a:hover {
color: #002f67;
fill: #002f67;
background-color: #f2f5f9;
}
.navbar-second-line .social-gtranslate-list--desktop > a:focus:after, .navbar-second-line .social-gtranslate-list--desktop > a:hover:after {
color: #002f67;
}
.navbar-second-line .social-gtranslate-list--desktop > a:focus .select-icon, .navbar-second-line .social-gtranslate-list--desktop > a:hover .select-icon {
fill: #002f67;
}
#sliding-popup {
background-color: #1f7ea7 !important;
}
......@@ -611,10 +764,20 @@ html:not(.js) .navbar-default .dropdown:hover > button .navbar-nav__icon {
}
@media (max-width: 899px) {
.navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu {
.navbar-default.navbar-second-line .navbar-nav li > ul > li.expanded > .dropdown-menu {
background-color: #f2f5f9;
}
.navbar-default.navbar-second-line .navbar-nav li > ul > li.expanded > .dropdown-menu > li:focus, .navbar-default.navbar-second-line .navbar-nav li > ul > li.expanded > .dropdown-menu > li:hover, .navbar-default.navbar-second-line .navbar-nav li > ul > li.expanded > .dropdown-menu > li.active {
background: #004494;
}
.navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu,
.header-top .navbar-nav li > ul > li.expanded > .dropdown-menu {
background-color: #1f1f1f;
}
.navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu > li:focus, .navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu > li:hover, .navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu > li.active {
.navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu > li:focus, .navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu > li:hover, .navbar-default .navbar-nav li > ul > li.expanded > .dropdown-menu > li.active,
.header-top .navbar-nav li > ul > li.expanded > .dropdown-menu > li:focus,
.header-top .navbar-nav li > ul > li.expanded > .dropdown-menu > li:hover,
.header-top .navbar-nav li > ul > li.expanded > .dropdown-menu > li.active {
background: #333333;
}
.navbar-collapse .dropdown-menu li a {
......@@ -624,6 +787,13 @@ html:not(.js) .navbar-default .dropdown:hover > button .navbar-nav__icon {
color: #f3f3f3;
background-color: #1f1f1f;
}
.navbar-collapse .dropdown-menu.navbar-second-line {
background-color: #004494;
}
.navbar-collapse .dropdown-menu.navbar-second-line li a:hover, .navbar-collapse .dropdown-menu.navbar-second-line li a:focus {
color: #002f67;
background-color: #f2f5f9;
}
}
@media (max-width: 599px) {
......
.main-container-no-padding-top {
padding-top: 0;
}
.socialblue--sky .container--navbar {
.socialblue--sky .navbar-default:not(.navbar-second-line) .container--navbar {
max-width: 100%;
padding: 0;
}
......
......@@ -56,6 +56,10 @@
background-color: transparent;
}
.navbar-default .navbar-nav.main {
margin-right: 5px;
}
.navbar-default .dropdown-menu {
border-top-left-radius: 0;
border-top-right-radius: 0;
......@@ -149,16 +153,44 @@
}
.navbar-scrollable:after {
background: -webkit-gradient(linear, left top, right top, from(rgba(31, 128, 170, 0)), to(#1f80aa));
background: linear-gradient(to right, rgba(31, 128, 170, 0), #1f80aa);
}
.header-top > .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.header-top .navbar-header {
padding: 2rem 1rem;
}
.header-top .navbar-header {
margin-right: auto;
}
.header-top .navbar-brand,
.navbar-second-line .navbar-brand {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
@media (min-width: 900px) {
.search-take-over .form-text {
color: #ffffff;
}
.search-take-over .form-text:focus {
border-color: #ffffff;
box-shadow: 0 2px 0 0 #ffffff;
-webkit-box-shadow: 0 2px 0 0 #ffffff;
box-shadow: 0 2px 0 0 #ffffff;
}
}
......@@ -223,4 +255,8 @@
color: #4d4d4d;
background-color: #777;
}
.header-top .navbar-header {
padding-top: 1rem;
padding-bottom: 1rem;
}
}
......@@ -19,6 +19,10 @@ $info = [
'navbar-active-text' => t('Navigation active item text'),
'navbar-sec-bg' => t('Section navbar background'),
'navbar-sec-text' => t('Section navbar text'),
'second-line-navbar-bg' => t('Second line navigation background'),
'second-line-navbar-text' => t('Second line navigation text'),
'second-line-navbar-active-bg' => t('Second line navigation active item background'),
'second-line-navbar-active-text' => t('Second line navigation active item text'),
],
// Pre-defined color schemes.
// Do not use the same color twice as the color module does not
......@@ -39,6 +43,10 @@ $info = [
'navbar-active-text' => '#f3f3f3',
'navbar-sec-bg' => '#1f7ea7',
'navbar-sec-text' => '#f9f9f9',
'second-line-navbar-bg' => '#004494',
'second-line-navbar-text' => '#fffff1',
'second-line-navbar-active-bg' => '#f2f5f9',
'second-line-navbar-active-text' => '#002f67',
],
],
'purple_rain' => [
......@@ -55,6 +63,10 @@ $info = [
'navbar-active-text' => '#cbb6df',
'navbar-sec-bg' => '#300059',
'navbar-sec-text' => '#f9f9f9',
'second-line-navbar-bg' => '#38214a',
'second-line-navbar-text' => '#fffff1',
'second-line-navbar-active-bg' => '#4c2e76',
'second-line-navbar-active-text' => '#f4eafb',
],
],
'snow_white' => [
......@@ -71,6 +83,10 @@ $info = [
'navbar-active-text' => '#cbb6df',
'navbar-sec-bg' => '#454765',
'navbar-sec-text' => '#e9e8fe',
'second-line-navbar-bg' => '#eff0f6',
'second-line-navbar-text' => '#4a4855',
'second-line-navbar-active-bg' => '#515153',
'second-line-navbar-active-text' => '#eeeeee',
],
],
'raspberry_blue' => [
......@@ -87,6 +103,10 @@ $info = [
'navbar-active-text' => '#fffbf7',
'navbar-sec-bg' => '#2d3945',
'navbar-sec-text' => '#f7f7ff',
'second-line-navbar-bg' => '#263341',
'second-line-navbar-text' => '#ededdf',
'second-line-navbar-active-bg' => '#fc715a',
'second-line-navbar-active-text' => '#ecebea',
],
],
],
......
......@@ -48,3 +48,18 @@
padding-left: 1em;
}
}
/*Two rows of the header*/
.header-top {
display: none;
padding: 2rem 1rem;
background: #fff;
}
.navbar-second-line .header-top {
display: block;
}
.navbar-second-line .navbar-default .navbar-brand {
display: none;
}
<div class="color-preview">
<div class="color-preview-header">
<div class="header-top">
<div class="block-system-branding-block navbar-header">
<a class="navbar-brand" href="/" title="Home" rel="home">
<img src="/profiles/contrib/social/themes/socialblue/logo.svg" alt="Open Social" />
</a>
</div>
</div>
<nav class="navbar navbar-default" role="banner">
<div class="container container--navbar">
......
......@@ -23,15 +23,28 @@
var $colorPreview = $form.find('.color-preview');
var $colorPalette = $form.find('.js-color-palette');
// Navbar background.
$colorPreview.find('.color-preview-header .navbar-default').css('backgroundColor', $colorPalette.find('input[name="palette[navbar-bg]"]').val());
// Navbar text.
$colorPreview.find('.color-preview-header .navbar-default .navbar-nav > li > a').css('color', $colorPalette.find('input[name="palette[navbar-text]"]').val());
function navbarColors(navBg, navText, navActiveBg, navActiveText) {
// Navbar background.
$colorPreview.find('.color-preview-header .navbar-default')
.css('backgroundColor', $colorPalette.find('input[name="palette['+navBg+']"]').val());
// Navbar text.
$colorPreview.find('.color-preview-header .navbar-default .navbar-nav > li > a')
.css('color', $colorPalette.find('input[name="palette['+navText+']"]').val());
// Navbar active background.
$colorPreview.find('.color-preview-header .navbar-default .navbar-nav > li > a.is-active')
.css('backgroundColor', $colorPalette.find('input[name="palette['+navActiveBg+']"]').val());
// Navbar active text.
$colorPreview.find('.color-preview-header .navbar-default .navbar-nav > li > a.is-active')
.css('color', $colorPalette.find('input[name="palette['+navActiveText+']"]').val());
}
// Navbar active background.
$colorPreview.find('.color-preview-header .navbar-default .navbar-nav > li > a.is-active').css('backgroundColor', $colorPalette.find('input[name="palette[navbar-active-bg]"]').val());
// Navbar active text.
$colorPreview.find('.color-preview-header .navbar-default .navbar-nav > li > a.is-active').css('color', $colorPalette.find('input[name="palette[navbar-active-text]"]').val());
navbarColors(
'navbar-bg',
'navbar-text',
'navbar-active-bg',
'navbar-active-text'
);
// Section navbar background.
$colorPreview.find('.color-preview-secondary .navbar-secondary').css('backgroundColor', $colorPalette.find('input[name="palette[navbar-sec-bg]"]').val());
......@@ -90,6 +103,44 @@
}
}
);
// Two rows of the header.
var oneRow = $('input[id="edit-header-style-one-line"]');
var twoRows = $('input[id="edit-header-style-two-lines"]');
var header = $('.color-preview-header');
function twoRowsSettings() {
if (twoRows.prop("checked")) {
header.addClass('navbar-second-line');
navbarColors(
'second-line-navbar-bg',
'second-line-navbar-text',
'second-line-navbar-active-bg',
'second-line-navbar-active-text'
);
}
else {
header.removeClass('navbar-second-line');
navbarColors(
'navbar-bg',
'navbar-text',
'navbar-active-bg',
'navbar-active-text'
);
}
}
twoRowsSettings();
oneRow.on('click', function () {
twoRowsSettings();
});
twoRows.on('click', function () {
twoRowsSettings();
});
}
};
})(jQuery, Drupal, drupalSettings);
......@@ -112,6 +112,11 @@ $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%);
$text-muted: $gray;
$second-line-navbar-bg: #004494;
$second-line-navbar-text: #fffff1;
$second-line-navbar-active-bg: #f2f5f9;
$second-line-navbar-active-text: #002f67;
// Bootstrap 4.0 Beta syntax
$theme-colors: (
......
@import "settings";
.socialblue--sky {
.container--navbar {
max-width: 100%;
padding: 0;
.navbar-default:not(.navbar-second-line) {
.container--navbar {
max-width: 100%;
padding: 0;
}
}
.navbar-fixed-top {
......
......@@ -61,6 +61,10 @@
background-color: $navbar-default-link-disabled-bg;
}
}
&.main {
margin-right: 5px;
}
}
// Links within the dropdown menu
......@@ -275,3 +279,32 @@
.navbar-scrollable:after {
background: linear-gradient(to right, rgba($brand-secondary,0), rgba($brand-secondary,1));
}
// Navbar brand if you use header multi line setting.
.header-top {
> .container {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.navbar-header {
padding: 2rem 1rem;
@include for-tablet-landscape-down {
padding-top: 1rem;
padding-bottom: 1rem;
}
}
.navbar-header {
margin-right: auto;
}
}
.header-top,
.navbar-second-line {
.navbar-brand {
justify-content: flex-start;
}
}
\ No newline at end of file
//Reset `padding-top` style if you use two rows of the header.
.main-container-no-padding-top {
padding-top: 0;
}
\ No newline at end of file
......@@ -285,6 +285,86 @@ blockquote {
}
}
&.navbar-second-line {
background-color: $second-line-navbar-bg;
.navbar-nav {
> li > a,
> li > button {
color: $second-line-navbar-text;
fill: $second-line-navbar-text;
&:hover,
&:focus {
color: $second-line-navbar-active-text;
background-color: $second-line-navbar-active-bg;
.navbar-nav__icon {
fill: $second-line-navbar-active-text;
}
}
}
> .open > a,
> .open > button {
&,
&:hover,
&:focus {
background-color: $second-line-navbar-active-bg;
color: $second-line-navbar-active-text;
}
}
> li > a.is-active,
> li > button.is-active,