maestrano/mno-enterprise-angular

View on GitHub
src/app/views/onboarding/layout.less

Summary

Maintainability
Test Coverage

#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;
  }
}