Files
frontend-component-header/src/index.scss
2021-12-02 14:17:17 -05:00

121 lines
2.0 KiB
SCSS

$spacer: 1rem;
$blue: #007db8;
$white: #fff;
@import './Menu/menu.scss';
.dropdown-item a {
text-decoration: none;
}
.icon-button {
display: inline-flex;
line-height: 3rem;
background: transparent;
vertical-align: middle;
text-align: center;
border: none;
height: 3rem;
width: 3rem;
padding: .75rem;
justify-content: center;
align-items:center;
&:hover, &:focus {
background: rgba(0,0,0,.1);
}
}
.learning-header {
min-width: 0;
.course-title-lockup {
min-width: 0;
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 0.1rem;
}
}
.user-dropdown {
.btn {
height: 3rem;
@media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
padding: 0 0.5rem;
}
}
}
}
.site-header-mobile,
.site-header-desktop {
position: relative;
z-index: 1000;
}
.site-header-mobile {
height: 3rem;
.nav-link {
text-decoration: none;
cursor: pointer;
}
img {
height: 1.5rem;
}
}
.site-header-desktop {
box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
background: $white;
.nav-link {
text-decoration: none;
}
.logo {
display: block;
box-sizing: content-box;
position: relative;
top: -.05em;
height: 1.75rem;
padding: 1rem 0;
margin-right: 1rem;
img {
display: block;
height: 100%;
}
}
.main-nav {
.nav-link {
padding: 1.125rem 1rem;
text-decoration: none;
font-weight: 500;
letter-spacing: .01em;
}
.nav-link:hover,
.nav-link:focus,
.nav-link.active,
.expanded .nav-link {
background: $component-active-bg;
color: $component-active-color;
}
.menu {
position: static;
.menu-content {
border-top: solid 2px $component-active-bg;
left: 0;
right: 0;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
padding: 1rem;
}
}
}
.search-input {
border-radius: $rounded-pill;
}
}