//// /// Copyright (c) 2016-2018 Martin Donath /// /// 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; } // Hero teaser .md-hero { 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; } } // [screen +]: Set background color for tabs @include break-from-device(screen) { // Tabs with outline .md-tabs { background-color: $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; } // Hero teaser .md-hero { background-color: $md-color-white; color: $md-color-black; // Add a border if there are no tabs &--expand { border-bottom: 0.1rem solid $md-color-black--lightest; } } // [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 portrait +]: Change color of search input @include break-from-device(tablet landscape) { // Search input .md-search__input { background-color: $md-color-black--lightest; // Search input placeholder &::placeholder { color: $md-color-black--light; } } } // [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; } // Hero teaser .md-hero { border-bottom: 0.1rem solid $md-color-black--lightest; } } // [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-color: $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; } } }