mkdocs-material/src/assets/stylesheets/application.palette.scss

////
/// Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
///
/// Permission is hereby granted, free of charge, to any person obtaining a
/// copy of this software and associated documentation files (the "Software"),
/// to deal in the Software without restriction, including without limitation
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
/// and/or sell copies of the Software, and to permit persons to whom the
/// Software is furnished to do so, subject to the following conditions:
///
/// The above copyright notice and this permission notice shall be included in
/// all copies or substantial portions of the Software.
///
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
/// DEALINGS
////

// ----------------------------------------------------------------------------
// Dependencies
// ----------------------------------------------------------------------------

@import "modularscale";
@import "material-color";
@import "material-shadows";

// ----------------------------------------------------------------------------
// Local imports
// ----------------------------------------------------------------------------

@import "helpers/break";
@import "helpers/px2em";

@import "config";

// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------

// Color tile for presentation in theme documentation
button[data-md-color-primary],
button[data-md-color-accent] {
  width: 13rem;
  margin-bottom: 0.4rem;
  padding: 2.4rem 0.8rem 0.4rem;
  transition:
    background-color 0.25s,
    opacity          0.25s;
  border-radius: 0.2rem;
  color: $md-color-white;
  font-size: ms(-1);
  text-align: left;
  cursor: pointer;

  // Hovered color tile
  &:hover {
    opacity: 0.75;
  }
}

// Build primary colors
@each $name, $color in (
  "red":         $clr-red-400,
  "pink":        $clr-pink-500,
  "purple":      $clr-purple-400,
  "deep-purple": $clr-deep-purple-400,
  "indigo":      $clr-indigo-500,
  "blue":        $clr-blue-500,
  "light-blue":  $clr-light-blue-500,
  "cyan":        $clr-cyan-500,
  "teal":        $clr-teal-500,
  "green":       $clr-green-500,
  "light-green": $clr-light-green-600,
  "lime":        $clr-lime-600,
  "yellow":      $clr-yellow-800,
  "amber":       $clr-amber-700,
  "orange":      $clr-orange-600,
  "deep-orange": $clr-deep-orange-400,
  "brown":       $clr-brown-500,
  "grey":        $clr-grey-600,
  "blue-grey":   $clr-blue-grey-600
) {

  // Color tile for presentation in theme documentation
  button[data-md-color-primary="#{$name}"] {
    background-color: $color;
  }

  // Color palette
  [data-md-color-primary="#{$name}"] {

    // Links in typesetted content
    .md-typeset a {
      color: $color;
    }

    // Application header (stays always on top)
    .md-header {
      background-color: $color;
    }

    // Current or active link
    .md-nav__link:active,
    .md-nav__link--active {
      color: $color;
    }

    // Reset active color for nested list titles
    .md-nav__item--nested > .md-nav__link {
      color: inherit;
    }

    // [tablet portrait -]: Layered navigation
    @include break-to-device(tablet portrait) {

      // Repository containing source
      .md-nav__source {
        background-color: mix($color, $md-color-black, 75%);
      }
    }

    // [tablet -]: Layered navigation
    @include break-to-device(tablet) {

      // Site title in main navigation
      html & .md-nav--primary .md-nav__title--site {
        background-color: $color;
      }
    }

    // [tablet landscape +]: Add border to table of contents
    @include break-from-device(tablet landscape) {

      // Table of contents
      .md-nav--secondary {
        border-left: 0.4rem solid $color;
      }
    }

    // [screen +]: Set background color for tabs
    @include break-from-device(screen) {

      // Tabs with outline
      .md-tabs {
        background: $color;
      }
    }
  }
}

// Color tile for presentation in theme documentation
button[data-md-color-primary="white"] {
  background-color: $md-color-white;
  color: $md-color-black;
  box-shadow: 0 0 0.1rem $md-color-black--light inset;
}

// Overrides for white color
[data-md-color-primary="white"] {

  // Application header (stays always on top)
  .md-header {
    background-color: $md-color-white;
    color: $md-color-black;
  }

  // Search input
  .md-search__input {
    background-color: $md-color-black--lightest;

    // Search input placeholder
    &::placeholder {
      color: $md-color-black--light;
    }
  }

  // Table of contents
  .md-nav--secondary {
    border-left: 0.4rem solid $md-color-black--light;
  }

  // [tablet portrait -]: Layered navigation
  @include break-to-device(tablet portrait) {

    // Repository containing source
    .md-nav__source {
      background-color: $md-color-black--lightest;
      color: $md-color-black;
    }
  }

  // [tablet -]: Layered navigation
  @include break-to-device(tablet) {

    // Site title in main navigation
    html & .md-nav--primary .md-nav__title--site {
      background-color: $md-color-white;
      color: $md-color-black;
    }
  }

  // [screen +]: Set background color for tabs
  @include break-from-device(screen) {

    // Tabs with outline
    .md-tabs {
      border-bottom: 0.1rem solid $md-color-black--lightest;
      background: $md-color-white;
      color: $md-color-black;
    }
  }
}

// Build accent colors
@each $name, $color in (
  "red":         $clr-red-a400,
  "pink":        $clr-pink-a400,
  "purple":      $clr-purple-a200,
  "deep-purple": $clr-deep-purple-a200,
  "indigo":      $clr-indigo-a200,
  "blue":        $clr-blue-a200,
  "light-blue":  $clr-light-blue-a700,
  "cyan":        $clr-cyan-a700,
  "teal":        $clr-teal-a700,
  "green":       $clr-green-a700,
  "light-green": $clr-light-green-a700,
  "lime":        $clr-lime-a700,
  "yellow":      $clr-yellow-a700,
  "amber":       $clr-amber-a700,
  "orange":      $clr-orange-a400,
  "deep-orange": $clr-deep-orange-a200
) {

  // Color tile for presentation in theme documentation
  button[data-md-color-accent="#{$name}"] {
    background-color: $color;
  }

  // Color palette
  [data-md-color-accent="#{$name}"] {

    // Typesetted content
    .md-typeset {

      // Hovered and active links
      a:hover,
      a:active {
        color: $color;
      }

      // Hovered scrollbar thumb
      pre code::-webkit-scrollbar-thumb:hover,
      .codehilite pre::-webkit-scrollbar-thumb:hover {
        background-color: $color;
      }

      // Copy to clipboard active icon
      .md-clipboard:hover::before,
      .md-clipboard:active::before {
        color: $color;
      }

      // Active or targeted back reference
      .footnote li:hover  .footnote-backref:hover,
      .footnote li:target .footnote-backref {
        color: $color;
      }

      // Active, targeted or focused permalink
      [id]:hover  .headerlink:hover,
      [id]:target .headerlink,
      [id] .headerlink:focus {
        color: $color;
      }
    }

    // Focused or hovered link
    .md-nav__link:focus,
    .md-nav__link:hover {
      color: $color;
    }

    // Search container scrollbar thumb
    .md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
      background-color: $color;
    }

    // Search result link
    .md-search-result__link {

      // Active or hovered link
      &[data-md-state="active"],
      &:hover {
        background-color: transparentize($color, 0.9);
      }
    }

    // Wrapper for scrolling on overflow
    .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
      background-color: $color;
    }

    // Source file icon
    .md-source-file:hover::before {
      background-color: $color;
    }
  }
}