Merge Chromium + Blink git repositories

[chromium-blink-merge.git] / chrome / common / extensions / docs / static / sass / _article.scss

$article-width: 70%;
$toc-width: 20%;
$site-toc-width: 175px;

// Site navigation on all pages
   .inline-site-toc {
     line-height: 1.3em;

     a {
       @include display-flex();
       padding: 0.5em 0;
     }

     a,
     a:link,
     a:visited {
       color: $gray-medium;
       font-weight: normal;
   
       &:hover,
       &:focus {
         color: $black;
       }
     }
     
     span .show {
       display: block;
       content: "+ or -";
     }    

     li {
       display: none;

       .show {
         display: block;
         content: "+ or -";
       }

       &.show, 
       &.show > ol > li {
         display: block;
       }

       &.toplevel {
         span {
           // font-size: 18px;
           // color: #bbb;
           // background: $white;
           display: none;
         }

         li {
           padding-left: 1em;
         }

         > ol {
           &.toc > li {
             font-size: 15px;
             margin: 0 0;
             padding: 15px 1em;
             border-bottom: $default-border;
           }
           > li {
             cursor: default;

             &.show {
               background-color: darken($gray-light, 2%);
             }
             > ol > li:first-child {
               padding-top: 10px;
             }
           }
         }
       }

       li a,
       li a:link,
       li a:visited {
         color: $gray-medium;
   
         &:hover,
         &:focus {
           color: $black;
         }
       }

       li.selected {
         li {
          display:block;
         }
         > a {
         font-weight: bold;
         color: $black;
         }
       }
     } 

     .site-related {
       display: block;
       background-color: $gray-light;
       padding: 0;
       width: inherit;
       
       h3 {
         margin-top: 0;
       }
        
       li a.active {
         color: $black;
       }  
     } 
     
     #toc {
       display: block;
   
       .toplevel {
         > a {
           font-weight: bold;
           color: $black;
   
           &.hastoc::after {
             content: '+';
             @include flex(1);
             text-align: right;
           }
         }
         &.active {
           .toc {
             display: block;
           }
           > a.hastoc::after {
             content: ""; /* don't make it look like you can toggle it closed */
           }   
         }
       }
     }
   
    .toc {
       margin: 0;
       padding: 0;
      
       .toc li {
         font-size: 13px;
       } 
     }
  
     ol.toc ol.toc ol.toc li {
       margin: 0;
     }

   }  

// TOC on article pages
.inline-toc {
  line-height: 1.3em;

  a,
  a:link,
  a:visited {
    color: $gray-medium;
    font-weight: normal;

    &:hover,
    &:focus {
      color: $black;
    }
  }
  li li a,
  li li a:link,
  li li a:visited {
    color: $gray-medium;

    &:hover,
    &:focus {
      color: $black;
    }
  }  

  a {
    @include display-flex();
    padding: 0.5em 0;
  }

  .related {
    display: block;
    background-color: $gray-light;
    box-shadow: $nav-box-shadow;
    padding: 1em 1em 0.5em 1em;
    margin-bottom: 1em; /* so the box shadow doesn't get cut off */

    h3 {
      margin-top: 0;
    }

    li a {
      &.active {
        color: $black;
      }
      &:hover {
        background-image: $nav-hover-gradient;
      }
    }
  }

  #toc {
    display: none;

    .toplevel {
       > a {
        font-weight: bold;
        color: $black;

        &.hastoc::after {
          content: '+';
          @include flex(1);
          text-align: right;
        }
      }
  
      &.active {
        .toc {
        display: block;
        }  
        > a.hastoc {
          content: '-'
        }  
      }
    }
  }

  .toc {
    margin: 0;
    paddiing: 0;
    border-top: $default-border;

    .toc {
      display: none;
      li {
        padding-left: 1em;
        border-bottom: $default-border; 
      } 
    }  
  }
}

// Footer at bottom of articles
#cc-info {
  font-style: italic;
  //font-size: $small-label-size;
  font-size: 0.8em;
  color: lighten($text, 5%);
  .cc-logo img {
    width: 90px;
    height: 32px;
  }
}

// Multi-step codelabs
.h1-step { display: block; font-size: 0.5em; line-height: 150%; }

// API roundup on codelabs
.anchor-link-icon { padding-left: 1px; }

// Larger than mobile.
@media only screen and (min-width: $break-small)  { 
  .inline-site-toc {
    float: left;
    width: $site-toc-width;
    overflow-x: hidden;
  }

  .inline-toc { 
    width: $toc-width;
    float: right;
    margin: 0 4% 20px 4%;
    overflow: auto;
    overflow-x: hidden;

    #toc {
      display: block;
    }
  }
  .article-content {
    // width: $article-width;
    // padding-right: 5%;
    border-right: 1px solid $gray-light;
    min-height: 750px; /* add min-height so fatnav, sidenav, and footer don't overlap badly */

    [itemprop="articleBody"] {
      margin-left: 195px; 
    }
  }
  .cc-logo {
    margin: 0 0 0 auto;
  }
}

// Tablet
@media only screen and (min-width: $break-small + 1) and (max-width: $break-large) {
  .inline-toc {
    width: $toc-width - 40;
    //margin-left: $toc-margin-left - 30;
  }
  .inline-site-toc {
    float: left;
    width: $site-toc-width;
    overflow-x: hidden;
  }
}

// Phone
@media only screen and (max-width: $break-small)  { 
  .article-content [itemprop="articleBody"] {
    > .collapsible {
      height: 58px;
      overflow: hidden;

      &.active {
        height: auto;
        h2::before {
          content: '-';
        }
      }

      h2 {
        position: relative;
        margin: 0;
        padding: $default-padding - 5 $default-padding  - 5 $default-padding  - 5 0;
        border-top: $default-border;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &::before {
          position: absolute;
          right: 0;
          content: '+';
        }
      }
    }
    .related {
      margin: $default-padding 0;
    }
  }
  .hidden {
    display: none;
  }
}


dl.nice {

  &:before,
  &:after {
      display: table;
      content: " ";
  }

  &:after {
      clear:both;
  }

  dt {
    font-weight: bold;
    float: left;
    width: 160px;
    clear: left;
  }

  dt.full-width {
    width: 100%;
  }

  dd {
      margin: 0 0 15px 180px;
  }
}

@media(max-width:580px) {
  dl.nice {
    dt {
        width: 100%;
    }
    dd {
        width: 100%;
        margin-left: 0;
    }
  }
}