src/app/views/onboarding/layout.less
#onboarding {
header.header {
display: flex;
justify-content: space-between;
align-items: center;
height: @onboarding-header-height;
background: @onboarding-header-background-color;
color: @onboarding-header-font-color;
@media (max-width: @screen-xs-max) {
.name {
display: none;
}
}
.onboarding-menu {
padding-right: 10px;
.default-link {
color: @onboarding-header-menu-text;
background: @onboarding-header-bg-menu;
padding: 10px 20px;
i {
width: 20px;
}
&:hover {
text-decoration: none;
color: @onboarding-header-menu-text-hover;
background-color: @onboarding-header-bg-menu-hover;
}
}
.box-content {
padding-top: 5px;
position: absolute;
margin-right: 10px;
width: 100%;
overflow: hidden;
border-bottom-left-radius: 1em;
a {
display: block;
}
}
}
.logo {
height: 40px;
margin-left: 10px;
}
.avatar {
.img-circle;
margin-left: 10px;
margin-right: 10px;
}
}
.sub-header {
.z-depth(3);
display: flex;
justify-content: space-around;
align-items: center;
height: @onboarding-subheader-height;
background: @onboarding-subheader-background-color;
color: @onboarding-subheader-font-color;
margin-bottom: 20px;
.breadcrumb-item {
text-decoration: none;
// Deactivate the link
pointer-events: none;
.badge {
color: @onboarding-breadcrumb-badge-color;
background-color: @onboarding-breadcrumb-badge-bg;
}
&.active {
.badge {
color: @onboarding-breadcrumb-badge-color-active;
background: @onboarding-breadcrumb-badge-bg-active;
}
}
.title {
color: @onboarding-breadcrumb-link-color;
@media (max-width: @screen-xs-max) {
display: none;
}
&:hover, &:focus {
font-weight: 400;
}
}
}
}
.content-panel {
.z-depth(6);
border-radius: @onboarding-content-panel-border-radius;
padding: 20px;
margin-bottom: 30px;
background-color: @onboarding-content-panel-bg;
color: @onboarding-content-panel-color;
h1 {
margin-top: 0;
}
}
.next-button {
.top-buffer-2;
font-size: larger;
}
}