_src-fauxton-visual-guide/main.less

html, body {
  font-family: "Helvetica";
  padding: 0;
  background: #f9f9f9;
  color: #444;
  margin: 0;
  height: 100%;

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

#redsidebar {
  width: 270px;
  height: 100vh;
  background-color: #d84d4d;
  position: fixed;
  text-align: center;

  overflow: auto;

  .header {
    padding: 20px 20px 40px 20px;

    font-weight: bold;
    color: #f9f9f9;
    vertical-align: middle;
    font-size: 16px;

    .logo {
      fill: #9b0038;
      height: 25px;
      display: inline;
      padding-right: 10px;
      vertical-align: middle;
    }

    .title {
      display: inline;
      vertical-align: middle;
      cursor: pointer;
    }

    .subtitle{
      color: #750f34;
      vertical-align: middle;
    }
  }

  a.section {
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 30px;
    display: block;
    font-weight: 300;
    color: #f9f9f9;
    font-size: 12px;
    text-decoration: none;

    &:hover {
      cursor: pointer;
      color: #750f34;
    }

    .large-icon {
      height: 150px;
      width: 150px;
      background-repeat: no-repeat;
      margin: auto;
    }

    &.getting-started .large-icon {
      background-image: url('imgs/getting-started-light.png');

      &:hover {
        background-image: url('imgs/getting-started-dark.png');
      }
    }
    
    &.using-fauxton .large-icon {
      cursor: pointer;
      background-image: url('imgs/using-fauxton-light.png');

      &:hover {
        background-image: url('imgs/using-fauxton-dark.png');
      }
    }

    &.answers .large-icon {
      background-image: url('imgs/answers-light.png');

      &:hover {
        background-image: url('imgs/answers-dark.png');
      }
    }
  }
}

#content {
  width: 100%;
  background: #f9f9f9;
  display: inline-block;
  -webkit-transition: padding-left 0.5s, width 0.5s;
  -moz-transition: padding-left 0.5s, width 0.5s;
  -o-transition: padding-left 0.5s, width 0.5s;
  transition: padding-left 0.5s, width 0.5s;
  overflow-y: auto;
  overflow-x: auto;

  &.showSideBar {
    padding-left: 270px;
    width: calc(100% ~"-" 270px);
  }

  #hamburger {
    height: 25px;
    text-align: left;
    padding: 15px;
    position: fixed;
    left: 0px;
    cursor: pointer;
    color: #750f34;
    font-size: 20px;
    top: 0px;

    -webkit-transition: left 0.5s, width 0.5s;
    -moz-transition: left 0.5s, width 0.5s;
    -o-transition: left 0.5s, width 0.5s;
    transition: left 0.5s, width 0.5s;

    &.showSideBar {
      left: 275px;
    }
  }

  .section {
    display: none;
  }
  .shown {
    display: inline;
  }
}

.middleBar {
  width: 255px;
  padding-left: 30px;
  padding-top: 50px;
  height: calc(100% ~"-" 100px);
  padding-bottom: 50px;
  float: left;
  position: fixed;
  background: #f9f9f9;
  text-align: center;

  .topic-image {
    height: 120px;
  }
  .section-title {
    font-weight: 300;
    color: #750f34;
  }
}

#rightContent {
  -webkit-touch-callout: text; 
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;

  width: calc(100% ~"-" 360px);
  padding-left: 300px;
  font-weight: 300;
  text-align: left;
  margin: auto;
  min-width: 450px;
  max-width: 960px;
  margin-top: 50px;

  .box {
    overflow-x: auto;
  }

  h1 {
    font-size: 24px;
    font-weight: normal;
    padding-bottom: 20px;
    
    &::before {
      content: url('imgs/diamond.png');
      margin-right: 10px;
    }
  }

  div, h2, p {
    margin-top: 15px;
    margin: 15px 8px;
    font-size: 16px;
  }

  .intro-section , .dl-space{
    padding-bottom: 40px;
  }

  .download-btn {
    width: 200px;
    vertical-align: middle;
  }

  a {
    color: black;
    
    &:hover{
      color: darkgray;
    }
  }
}

#using-fauxton {
  #rightContent {
    .chapter {
      padding: 75px 0 0 0;
      border-top: 1px solid gainsboro;

      a {
        color: black;
        
        &:hover{
          color: darkgray;
        }
      }

      img {
        width: 100%;      
      }
    }
  }

  #end-using-fauxton {
    height: 40vh;
  }
}

.fauxton-toc {
  margin-top: 40px;

  .icon-menu {
    width: 50px;
    height: 100%;
    float: left;
    font-size: 20px;
    text-align: center;

    a {
      color: #b3b3b3;
    }

    > div i:hover, 
    > div svg:hover, 
    a.selected {
      cursor: pointer;
      color: black;

      path {
       fill: black;
      }
    }

    .replicate-icon, .user-icon, .docs-icon {
      width: 22px;

      &:hover {
        path {
          fill: black;
        }
      }
      path {
        fill: #b3b3b3;
      }
    }

    .line {
      width: 50%;
      border-right: 1px dotted black;
      height: 10px;
      margin: 5px 0 5px 0;
    }
  }

  .toc {
    float: right;
    font-weight: 400;
    text-align: left;
    width: 175px;
    cursor: pointer;
    padding-right: 15px;

    a {
      text-decoration: none;
      color: #b3b3b3;
    }


    .heading {
      display: block;
      margin-left: 5px;
      margin-bottom: 15px;
      font-size: 12px;
      
      .heading-title { 
        padding-left: 18px;
      }

      .subheading {
        font-weight: normal;
        display: none;
        line-height: 17px;
        font-size: 10px;
        margin-left: 8px;

        &:hover {
          color: red;
        }
      }

      &.selected .subheading {
        display:block;
        padding-left: 19px;
      }
      
      &:hover {
        font-weight: bold;
        color: black;
        .subheading {
          font-weight: normal;
        }
      }
    }
    
    .selected {
      color: black;
      
      &.heading {
        padding-left: 0px;
      }

      .heading-title {
        font-weight: bold;
        margin-bottom: 10px;
        padding-left: 15px;
        border-left: 2px solid red;
        color: black;

        .number {
          font-size: 18px;
        }

        .heading-text {
          font-size: 12px;
        }
      }
    }
  }
}

#answers {
  .question {
    font-weight: bold;
  }

  a {
    color: black;
      
    &:hover{
      color: darkgray;
    }
  }
}

#end1, #end2 {
  height: 40vh;
}