mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-12-24 05:14:57 +01:00
449 lines
9.5 KiB
SCSS
449 lines
9.5 KiB
SCSS
////
|
|
/// Copyright (c) 2016 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
|
|
////
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// Rules
|
|
// ----------------------------------------------------------------------------
|
|
|
|
// TODO: cleanup redundant data-md-locked,
|
|
// --> use hidden checkbox for reasons of label/button/trigger easyness...
|
|
// TODO: set label for magnifying glasses onto search toggle
|
|
// --> this way we can always use the search toggle and only need the locked state on the body!
|
|
// --> question: how does this play with directly focusing the search field!?
|
|
|
|
.md-search__output {
|
|
overflow-y: auto; // necessary for rounded borders
|
|
// &::after {
|
|
// display: block;
|
|
// content: "";
|
|
// width: 100%;
|
|
// height: 20px;
|
|
// background: red; // TODO: white shadow overlay to fade out result scrolling
|
|
// }
|
|
|
|
[data-md-locked] & {
|
|
opacity: 1;
|
|
}
|
|
|
|
width: 100%;
|
|
|
|
opacity: 0;
|
|
transition: opacity .4s, max-height .4s;
|
|
|
|
|
|
text-align: left; // TODO: wrap with another div for this effect
|
|
|
|
z-index: -1; // ??? wherefor? probably not necessary anymore.
|
|
}
|
|
|
|
@include break-to-device(tablet portrait) {
|
|
.md-search__output {
|
|
position: absolute;
|
|
top: 5.6rem;
|
|
bottom: 0;
|
|
|
|
background:
|
|
linear-gradient(white 10%, rgba(255,255,255,0)), // cover
|
|
linear-gradient(to bottom, rgba(0, 0, 0, 0.25),
|
|
rgba(0, 0, 0, 0.125) 20%,
|
|
rgba(0, 0, 0, 0) 60%); // shadow
|
|
background-repeat: no-repeat;
|
|
background-color: white;
|
|
background-size: 100% 20px, 100% 10px;
|
|
|
|
// Opera doesn't support this in the shorthand
|
|
background-attachment: local, scroll;
|
|
}
|
|
.md-search-result__item {
|
|
// margin: 0.8rem;
|
|
}
|
|
.md-search-result__link {
|
|
padding: 0 1.6rem;
|
|
// background: white;
|
|
// border-radius: 0.2rem;
|
|
// @include z-depth(2);
|
|
}
|
|
.md-search-result__meta {
|
|
padding-left: 1.6rem;
|
|
border-top: 0.1rem solid rgba(0, 0, 0, 0.07);
|
|
}
|
|
}
|
|
|
|
@include break-from-device(tablet landscape) {
|
|
|
|
// Scroll shadow - WIP
|
|
.md-search__output {
|
|
@include z-depth(6);
|
|
|
|
background: $md-color-white;
|
|
// color: red;
|
|
border-top: 0.1rem solid $md-color-black--lightest; // TODO: box-shadow inset!
|
|
border-radius: 0 0 0.3rem 0.3rem; // ???
|
|
position: absolute; // must be absolute, or header nav will stretch
|
|
max-height: 0vh; // TODO: can this be done in percent!?!?!?
|
|
[data-md-locked] & {
|
|
max-height: 75vh;
|
|
}
|
|
|
|
// Override native scrollbar styles
|
|
&::-webkit-scrollbar {
|
|
width: 0.4rem;
|
|
height: 0.4rem;
|
|
|
|
// Style scrollbar thumb
|
|
&-thumb {
|
|
background-color: $md-color-black--lighter;
|
|
|
|
// Hovered scrollbar thumb
|
|
&:hover {
|
|
background-color: $md-color-accent;
|
|
}
|
|
}
|
|
}
|
|
|
|
background:
|
|
linear-gradient(white 10%, rgba(255,255,255,0)), // cover
|
|
linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0) 60%); // shadow
|
|
background-repeat: no-repeat;
|
|
background-color: white;
|
|
background-size: 100% 20px, 100% 5px;
|
|
|
|
/* Opera doesn't support this in the shorthand */
|
|
background-attachment: local, scroll;
|
|
}
|
|
}
|
|
|
|
.md-search-result {
|
|
|
|
|
|
&__meta {
|
|
color: $md-color-black--light;
|
|
padding-left: 4.8rem;
|
|
padding-right: 1.6rem;
|
|
line-height: 4.0rem;
|
|
font-size: ms(-1);
|
|
|
|
}
|
|
|
|
&__list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
border-top: 0.1rem solid $md-color-black--lightest;
|
|
}
|
|
|
|
&__item {
|
|
// background: yellow;
|
|
|
|
// border-top: 0.1rem solid $md-color-black--lightest;
|
|
}
|
|
|
|
|
|
&__link {
|
|
overflow: auto;
|
|
display: block;
|
|
padding-left: 4.8rem;
|
|
padding-right: 1.6rem;
|
|
transition: background 0.25s;
|
|
|
|
&:hover {
|
|
background: transparentize($md-color-accent, 0.9);
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
color: $md-color-black;
|
|
font-size: ms(0);
|
|
line-height: 1.4;
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
&__description {
|
|
color: $md-color-black--light;
|
|
font-size: ms(-1);
|
|
line-height: 1.4;
|
|
margin: 0.5em 0;;
|
|
}
|
|
}
|
|
|
|
// .md-nav--secondary > .md-nav__title {
|
|
// // -webkit-overflow-scrolling: touch;
|
|
// @include z-depth(1);
|
|
// }
|
|
|
|
|
|
// // add light border for more contrast
|
|
// .md-typeset pre {
|
|
// border: 1px solid rgba(0,0,0,0.0125);
|
|
// }
|
|
|
|
|
|
// .md-search__suggest {
|
|
//
|
|
//
|
|
// background: $md-color-white;
|
|
// border-radius: 0 0 0.3rem 0.3rem;
|
|
// color: #000000;
|
|
// text-align: left;
|
|
// border-top: 0.1rem solid $md-color-black--lightest;
|
|
// display: none; // TODO: doesnt work due to display: none;
|
|
// opacity: 0;
|
|
//
|
|
// // overflow: auto;
|
|
// transition: opacity .3s;
|
|
// // pointer-events: none;
|
|
//
|
|
//
|
|
// .md-search__input:focus ~ & {
|
|
// // animation: anima .3s;
|
|
// display: block;
|
|
// opacity: 1;
|
|
// }
|
|
// }
|
|
|
|
// TODO: only on tablet and bind to search active state!
|
|
// .md-search__input:focus {
|
|
// border-radius: 0.3rem 0.3rem 0 0;
|
|
// }
|
|
|
|
@include break-to-device(mobile landscape) {
|
|
|
|
.md-search__suggest {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
.md-search-term {
|
|
position: relative;
|
|
padding: 0 0.8rem 0 4.8rem;
|
|
line-height: 4.0rem; // don't use line height????
|
|
font-size: 1.6rem;
|
|
|
|
&::before {
|
|
@extend %md-icon;
|
|
|
|
position: absolute;
|
|
|
|
content: "access_time";
|
|
font-size: 2.4rem;
|
|
line-height: 4.0rem; // this sucks...
|
|
left: 1.2rem;
|
|
color: $md-color-black--lighter;
|
|
}
|
|
transition: background .25s;
|
|
cursor: pointer;
|
|
&:hover {
|
|
background: mix($md-color-white, $md-color-primary, 90%);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.checklist {
|
|
|
|
li {
|
|
position: relative;
|
|
list-style-type: none;
|
|
|
|
&::before {
|
|
@extend %md-icon;
|
|
|
|
position: absolute;
|
|
appearance: none;
|
|
color: blue;
|
|
|
|
content: "check_box";
|
|
font-size: 2.4rem;
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"]:checked {
|
|
width: 20px;
|
|
// & ~ .checklist li::after {
|
|
// color: red;
|
|
// }
|
|
}
|
|
}
|
|
|
|
// Inline code blocks
|
|
ins.critic, del.critic, mark {
|
|
margin: 0 0.4rem;
|
|
padding: 0.1rem 0;
|
|
word-break: break-word;
|
|
box-decoration-break: clone;
|
|
|
|
border-radius: 0.2rem;
|
|
|
|
// &::before {
|
|
// @extend %md-icon;
|
|
//
|
|
// color: $md-color-black--light;
|
|
//
|
|
// font-size: 1.6rem;
|
|
// padding-right: 0.2rem;
|
|
// vertical-align: -0.2rem;
|
|
// }
|
|
}
|
|
|
|
ins.critic {
|
|
background: #DDFFDD;
|
|
box-shadow: 0.4rem 0 0 #DDFFDD,
|
|
-0.4rem 0 0 #DDFFDD;
|
|
text-decoration: none;
|
|
// &::before {
|
|
// content: "add";
|
|
// }
|
|
}
|
|
|
|
del.critic {
|
|
background: #FFDDDD;
|
|
box-shadow: 0.4rem 0 0 #FFDDDD,
|
|
-0.4rem 0 0 #FFDDDD;
|
|
//
|
|
// &::before {
|
|
// content: "remove";
|
|
// }
|
|
}
|
|
|
|
// Not critic-specific!
|
|
mark {
|
|
background: #FFFF00;
|
|
box-shadow: 0.4rem 0 0 #FFFF00,
|
|
-0.4rem 0 0 #FFFF00; // ligher yellow...
|
|
overflow: auto; // TODO: remove this, just needed to rebuild
|
|
}
|
|
|
|
.critic.comment {
|
|
margin: 0 0.4rem;
|
|
padding: 0.1rem 0;
|
|
border-radius: 0.2rem;
|
|
background: #F0F0F0;
|
|
color: #37474F;
|
|
// font-size: 85%;
|
|
box-shadow: 0.4rem 0 0 #F0F0F0,
|
|
-0.4rem 0 0 #F0F0F0; // darker than code!!!
|
|
box-decoration-break: clone;
|
|
|
|
&::before {
|
|
@extend %md-icon;
|
|
|
|
color: $md-color-black--lighter;
|
|
|
|
content: "chat";
|
|
font-size: 1.6rem;
|
|
padding-right: 0.2rem;
|
|
vertical-align: -0.2rem;
|
|
}
|
|
}
|
|
|
|
.md-button {
|
|
float: right;
|
|
margin-top: 9px;
|
|
font-size: 13px;
|
|
padding-left: 2.6rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.task-list-item {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.task-list-item input {
|
|
margin: 0 4px 0.25em -20px;
|
|
vertical-align: middle;
|
|
}
|
|
//
|
|
//
|
|
//
|
|
.task-list-item {
|
|
position: relative;
|
|
}
|
|
|
|
.task-list-item input[type="checkbox"] {
|
|
opacity: 0;
|
|
}
|
|
|
|
.task-list-item input[type="checkbox"] + label {
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -24px;
|
|
width: 16px;
|
|
margin-top: -8px;
|
|
height: 16px;
|
|
border-radius: 2px;
|
|
background: #CCC;
|
|
}
|
|
|
|
.task-list-item input[type="checkbox"]:checked + label::before {
|
|
display: block;
|
|
margin-top: -4px;
|
|
margin-left: 2px;
|
|
font-size: 1.2em;
|
|
line-height: 1;
|
|
border-radius: 2px;
|
|
content: "✔";
|
|
color: #1EBB52;
|
|
}
|
|
|
|
.codehilite .hll {
|
|
background: #FFFF00;
|
|
display: block;
|
|
margin: 0 -16px;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
// TODO: integrate stylelint and property order!
|
|
|
|
|
|
.md-typeset {
|
|
sup {
|
|
// background: $md-color-black--lighter;
|
|
padding: 0 0.125em;
|
|
border-radius: 0.2em;
|
|
// font-weight: bold;
|
|
// color: $md-color-white;
|
|
&[id]:target {
|
|
background: orange;
|
|
}
|
|
|
|
a {
|
|
// color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
// TODO: remove jitter
|
|
// .md-search,
|
|
// .md-search__inner,
|
|
// .md-search__form {
|
|
// text-align: right;
|
|
// }
|