mitjajez/SONCE

View on GitHub
imports/ui/stylesheets/header.less

Summary

Maintainability
Test Coverage
@import './utils.less';

// Generic nav positioning and styles
nav {
  transform: translate3d(0,0,0);
  transition: all 200ms ease-out;

  .nav-item {
//    .font-m1;
    color: @color-ancillary;
    &:active { opacity: .5; }

  }
}

header nav {
  background: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
}


// Custom nav for.circuits-show
nav {

  .title-page {
//      white-space: nowrap;

    .title-wrapper {
      .ellipsized;
      color: @color-ancillary;
    }
  }
  form.element-new {
    input[type="text"] {
      background: transparent;
    }
  }
  form.circuit-edit-form {
    input[type="text"] {
      background: transparent;
      font-size: 1.125em; // 18px
    }
  }

  select.circuit-edit {
    .font-s2;
//    .position(absolute, 0,0,0,0);
    background: transparent;
    opacity: 0; // allows the cog to appear
  }

  .options-web {
//    display: none;

    .nav-item {
      .font-s3;
//      &:last-child { margin-right: .5rem; }
    }
  }

  // Hide & show options and nav icons
  @media screen and (min-width: 40em) {
    .nav-group:not(.right) { display: none !important; }
    .options-mobile { display: none; }
    .options-web {  display: block; }
  }
}


// Custom nav for auth
@media screen and (min-width: 40em) {
  .page.auth .nav-group { display: none; }
  .page.not-found .nav-group { display: none; }
}