Commit 05ae30cd authored by Pat Kira's avatar Pat Kira Committed by Cecilia Vela Gurovic
Browse files

Bug 1657565 - Primary school theme new navigation

Change-Id: Iaaa126236c463578f09e5d57b0e041fd48bc02b8
parent d5ac75ac
.menu-toggle {
&:before {
border-left: 1px solid #FFF;
}
}
.search-toggle {
color: #FFFFFF;
}
.navbar-toggle {
margin-right: 0;
margin-top: 0;
}
.header {
.navbar-toggle {
margin-top: 7px;
}
}
.navbar-showchildren {
background-color: transparent;
border-radius: 3px 3px 0 0;
color: #FFF;
height: 37px;
.icon {
color: $navbar-inverse-toggle-icon-bar-bg;
}
&:hover,
&:focus {
.icon {
background-color: transparent;
color: #FFF;
color: $navbar-inverse-toggle-icon-bar-bg;;
}
}
.icon {
color: #FFF;
}
&.collapsed {
height: auto;
.active & {
.icon {
color: $navbar-inverse-toggle-icon-bar-bg;;
}
}
}
.adminnav {
.navbar-showchildren {
height: 35px;
}
}
\ No newline at end of file
.header {
background-color: $brand-primary;
top: 0;
.logo {
margin-top: 2px;
}
.admin-title {
margin: 4px 10px 10px 0;
@media (max-width: $screen-sm-min) {
display: none;
}
margin-top: 11px;
a {
color: #9ad2ef;
font-family: 'GoodDog', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
&:focus,
&:hover {
color: lighten(#9ad2ef, 5%);
text-decoration: none;
}
}
}
+ .container {
// resets margin if there are no site-messages
margin-top: 0;
@media (max-width: $screen-sm-min) {
// resets margin as site-messages are hidden
margin-top: 0 !important;
}
}
}
/*
* Primary navigation menu
*/
.main-nav {
margin-bottom: 0;
ul {
@media (min-width: $screen-md-min) {
margin:0;
}
@media (min-width: $screen-sm-min) and (max-width: $screen-md-min - 1) {
margin:0;
}
}
.navbar-header{
@media (min-width: $screen-sm-min) {
margin:0;
}
}
.navbar-link {
padding: 8px 25px;
margin: 0;
border-bottom: 0;
color: #FFFFFF;
height: auto;
font-size: $font-size-base;
background-color: darken($brand-primary, 2%);
@media (min-width: $screen-sm-min) {
padding: 8px;
margin-right: 5px;
background-color: transparent;
}
@media (max-width: $screen-sm-min) {
display: block;
background-color: transparent;
}
&:focus,
&:hover {
background-color: rgba(#FFFFFF, 0.2);
border-radius: 3px;
color: #FFFFFF;
text-decoration: none;
}
.icon {
top:3px;
}
}
.nav > li > a {
border-top: 0;
border-bottom: 0;
@media (min-width: $screen-sm-min) {
padding: 10px 20px;
}
@media (min-width: $screen-sm-min) and (max-width: $screen-md-min - 1) {
padding: 10px 10px;
}
}
// Only shown on mobile, or when dropdowns are turned on
.child-nav {
background-color: transparent;
padding: 0px;
font-size: $font-size-base;
li {
background-color: transparent;
a { //styles that need to override bootstrap specificity
padding: 10px 29px 10px 50px;
color: #FFFFFF;
background-color: darken($brand-primary, 2%);
&:hover, &:focus {
color: #FFFFFF;
background-color: rgba(#FFFFFF, 0.2);
}
}
&.active {
background-color: transparent;
}
}
// If this link is the current page or section
.active > a {
font-weight: bold;
background-color: rgba(#FFFFFF, 0.8);
color: #000;
&:hover, &:focus {
color: #FFFFFF;
}
@media (min-width: $screen-sm-min) {
&:focus,
&:hover {
color: $text-color;
}
}
}
}
.has-dropdown {
@media (min-width: $screen-sm-min) {
padding: 0;
margin: 0; // override default ul
background-color: $dropdown-bg;
border:0;
// Links within the dropdown menu
> li a {
padding: 4px 20px;
}
}
}
// when a container is at the same level as main-nav (but isn't for admin), add padding
&:not(.adminnav)~ .container {
padding-top: 25px;
}
.navbar-default {
border-left-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
}
// admin menu with static second nav
.adminnav {
.nav {
> li {
> a {
font-size: $font-size-base;
&:focus,
&:hover {
background-color: rgba(#FFFFFF, 0.2);
}
}
&.active {
> a {
&:focus,
&:hover {
color: $brand-primary;
background-color: #FFFFFF;
}
}
}
.child-nav {
font-size: $font-size-base;
}
.navbar-toggle {
background-color: darken($brand-primary, 2%);
margin-top: 0;
}
}
}
.navbar-main .navbar-nav > li > a {
border-color: transparent;
}
// admin menu with dropdown
.dropdown-adminnav {
.navbar-nav {
> li {
> a {
font-size: $font-size-base;
&:focus,
&:hover {
background-color: rgba(#FFFFFF, 0.2);
}
}
&.active {
> a {
&:focus,
&:hover {
color: #000000;
}
}
}
.child-nav {
font-size: $font-size-base;
> li {
a:focus,
a:hover {
color: #FFFFFF;
background-color: $brand-primary;
}
&.active {
a:focus,
a:hover {
color: #FFFFFF;
}
}
}
}
.navbar-toggle {
background-color: darken($brand-primary, 2%);
}
}
}
}
//custom main nav
.main-nav .navbar-nav {
> li > a {
font-weight: bold;
color: #FFFFFF;
&:before {
font-family: 'FontAwesome';
font-weight: normal;
padding-right: 5px;
font-size: 19px;
}
&:focus,
&:hover {
color: #FFFFFF;
}
}
> .home {
// User menu styles.
// Note: Admin menu and user setting menu use styles inherited from Raw with
// color values specified in Primary theme bootstrap-variable.scss
// To change section color, simply change color value.
$home-color: #0591ce;
$content-color: #ca0238;
$myportfolio-color: #f29907;
$groups-color: #799323;
// Menue section variable array
// 1) Section name
// 2) Section icon
// 3) Main color (see colour value above)
// 4) Lighter shade (can be specified in hex,rgba value)
// 5) Darker shade (can be specified in hex,rgba value)
$menu-styles: (
("home", $fa-var-tachometer, $home-color, lighten($home-color, 5%), darken($home-color, 5%)),
("content", $fa-var-pencil-square, $content-color, lighten($content-color, 5%), darken($content-color, 5%)),
("myportfolio", $fa-var-file, $myportfolio-color, lighten($myportfolio-color, 5%), darken($myportfolio-color, 5%)),
("groups", $fa-var-users, $groups-color, lighten($groups-color, 5%), darken($groups-color, 5%))
);
.nav-main .navbar-nav {
// Override basic style color specified in Bootstrap variables
> li {
> a {
background-color: #0591ce;
font-weight: bold;
color: #FFFFFF;
border-color: transparent;
&:before {
content: $fa-var-tachometer;
font-family: 'FontAwesome';
font-weight: normal;
padding-right: 5px;
font-size: 19px;
color: #FFFFFF;
}
&:focus,
&:hover {
background-color: lighten(#0591ce, 5%);
color: #FFFFFF;
}
}
&.active {
&.active > a {
background-color: #FFFFFF;
> a {
color: #333333;
&:before {
color: #0591ce;
}
&:focus,
&:hover {
background-color: lighten(#0591ce, 5%);
color: #FFFFFF;
&:before {
color: #FFFFFF;
}
}
}
}
}
> .content {
> a {
background-color: #ca0238;
&:before {
content: $fa-var-pencil-square;
.navbar-showchildren{
top: 6px;
}
.child-nav > li {
a {
color: #FFFFFF;
}
&:focus,
&:hover {
background-color: lighten(#ca0238, 2%);
&.active a {
color: #FFFFFF;
}
}
&.active {
background-color: #FFFFFF;
}
@each $section in $menu-styles {
> .#{nth($section, 1)} {
> a {
@media (max-width: $screen-sm-min - 1) {
color: #333333;
&:focus,
&:hover {
color: #333333;
}
}
background-color: #{nth($section, 3)};
&:before {
color: #ca0238;
&:focus,
&:hover {
color: #FFFFFF;
}
content: "#{nth($section, 2)}";
}
&:focus,
&:hover {
background-color: #FFFFFF;
background-color: #{nth($section, 4)};
}
}
}
.navbar-toggle {
background-color: #ca0238;
&:focus,
&:hover {
background-color: darken(#ca0238, 2%);
}
}
.child-nav {
li {
a {
color: #FFFFFF;
background-color: darken(#ca0238, 2%);
&:focus,
&:hover {
background-color:#ca0238;
}
}
&.active a {
color: #FFFFFF;
background-color: lighten(#ca0238, 4%);
}
}
}
}
> .myportfolio {
> a {
background-color: #f29907;
&:before {
content: $fa-var-file;
}
&:focus,
&:hover {
background-color: lighten(#f29907, 2%);
}
}
&.active {
> a {
@media (max-width: $screen-sm-min - 1) {
color: #333333;
&:focus,
&:hover {
color: #333333;
}
}
&.active > a {
&:before {
color: #f29907;
color: #{nth($section, 3)};
&:focus,
&:hover {
background-color: #{nth($section, 4)};
color: #FFFFFF;
}
}
......@@ -342,105 +94,26 @@
background-color: #FFFFFF;
}
}
}
.navbar-toggle {
background-color: #f29907;
&:focus,
&:hover {
background-color: darken(#f29907, 2%);
}
}
.child-nav {
li {
a {
color: #FFFFFF;
background-color: darken(#f29907, 2%);
&:focus,
&:hover {
background-color:#f29907;
}
}
&.active a {
color: #FFFFFF;
background-color: lighten(#f29907, 4%);
}
}
}
}
> .groups {
> a {
background-color: #799323;
&:before {
content: $fa-var-users;
}
&:focus,
&:hover {
background-color: lighten(#799323, 2%);
}
}
&.active {
> a {
@media (max-width: $screen-sm-min - 1) {
color: #333333;
&:focus,
&:hover {
color: #333333;
}
}
&:before {
color: #799323;
&:focus,
&:hover {
color: #FFFFFF;
}
}
.navbar-showchildren,
&.active .navbar-showchildren {
background-color: #{nth($section, 3)};
&:focus,
&:hover {
background-color: #FFFFFF;
background-color: #{nth($section, 5)};
}
}
}
.navbar-toggle {
background-color: #799323;
&:focus,
&:hover {
background-color: darken(#799323, 2%);
}
}
.child-nav {
li {
.child-nav li {
a {
color: #FFFFFF;
background-color: darken(#799323, 2%);
background-color: #{nth($section, 5)};
&:focus,
&:hover {
background-color:#799323;
background-color: #{nth($section, 3)};
}
}
&.active a {
color: #FFFFFF;
background-color: lighten(#799323, 4%);
background-color: #{nth($section, 4)};
}
}
}
}
> .instituteadmin,
> .siteadmin {
> a {
background-color: #773f97;
&:before {
content: $fa-var-cog;
}
&:focus,
&:hover {
background-color: lighten(#773f97, 2%);
}
}
&.active > a:before {
color: #773f97;