LEARNER-1785 This story was to update the existing custom themes to work with the flexible bootstrap design. It also updates the red theme to more closely resemble the real implementation on openedx.
96 lines
2.0 KiB
SCSS
96 lines
2.0 KiB
SCSS
// Local overrides for bootstrap navigation bar theming
|
|
.navigation-container {
|
|
border-bottom: 1px solid $brand-primary;
|
|
text-decoration: none;
|
|
background-color: $header-bg;
|
|
|
|
&.slim {
|
|
border-bottom: 1px solid $inverse-color;
|
|
box-shadow: 0 1px 5px 0 $black-t0;
|
|
}
|
|
|
|
.navbar {
|
|
margin: 0 auto;
|
|
max-width: map-get($container-max-widths, xl);
|
|
|
|
.logo.slim a {
|
|
height: $baseline*3/2;
|
|
margin-top: $baseline/5;
|
|
}
|
|
|
|
.course-header {
|
|
font-size: $font-size-lg;
|
|
margin: $baseline/2 $baseline/2 0 0;
|
|
|
|
.provider {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
}
|
|
|
|
.nav-item {
|
|
margin: 0 $baseline 0 0;
|
|
font-weight: $font-weight-normal;
|
|
font-family: $font-family-base;
|
|
text-transform: uppercase;
|
|
list-style: none;
|
|
|
|
.nav-link {
|
|
color: $brand-primary;
|
|
}
|
|
|
|
.user-image-frame {
|
|
max-width: $baseline*2;
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
// Dealing with creating a collapsed menu
|
|
&.nav-item-open-collapsed-only {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: map-get($grid-breakpoints,md)) {
|
|
&.nav-item-open-collapsed, &.nav-item-open-collapsed-only {
|
|
display: initial;
|
|
margin: $baseline/4 $baseline/2;
|
|
|
|
a {
|
|
color: $brand-primary;
|
|
padding: 0;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: $input-border-color;
|
|
}
|
|
}
|
|
}
|
|
&.nav-item-hidden-collapsed {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-shopping-cart{
|
|
padding-top: 0.7rem; // $btn-padding-y-lg once themed
|
|
}
|
|
|
|
.navbar-right .nav-item {
|
|
@media (min-width: map-get($grid-breakpoints,md)) {
|
|
.nav-link {
|
|
text-transform: none;
|
|
color: $brand-inverse;
|
|
font-weight: $font-weight-bold;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&.dropdown {
|
|
cursor: pointer;
|
|
|
|
.dropdown-item {
|
|
text-transform: initial;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|