1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-27 17:00:54 +01:00

Refactored admonition styles to be slightly lighter

This commit is contained in:
squidfunk 2016-10-21 21:15:35 +02:00
parent 130bd9fe0b
commit 46b7e0f5fe
11 changed files with 433 additions and 149 deletions

View File

@ -1,57 +1,312 @@
# Admonition
## Variations
[Admonition][] is an extension included in the standard Markdown library that
makes it possible to add block-styled side content to your documentation, for
example summaries, hints, notes or warnings.
## Installation
Add the following lines to your `mkdocs.yml`:
``` yaml
markdown_extensions:
- admonition
```
## Usage
Admonition blocks follow a simple syntax: every block is started with `!!!`,
followed by a single keyword which is used as the [type qualifier](#types) of
the block. The content of the block then follows on the next line, indented by
four spaces.
Example:
``` markdown
!!! hint
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
```
Result:
!!! hint
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
!!! hint "Failure with custom name"
### Change the title
!!! hint
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
By default, the block title will equal the type qualifier. However, it can
easily be changed by adding a quoted string after the type qualifier.
Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in
sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
Example:
``` markdown
!!! hint "Phasellus posuere in sem ut cursus"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
```
Result:
!!! hint "Phasellus posuere in sem ut cursus"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
### Remove the title
Similar to setting a [custom title](#change-the-title), the icon and title can
be omitted by providing an empty string after the type qualifier:
Example:
``` markdown
!!! hint ""
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
```
Result:
!!! hint ""
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
### Embedded code blocks
Blocks can contain all kinds of text content, including headlines, lists,
paragraphs and other blocks except code blocks, because the parser from the
standard Markdown library does not account for those.
However, the [PyMdown Extensions][] package adds an extension called
`superfences`, which makes it possible to nest code blocks within other blocks.
Example:
!!! hint
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
> Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere
> sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
``` mysql
SELECT
Employees.EmployeeID,
Employees.Name,
Employees.Salary,
Manager.Name AS Manager
FROM
Employees
LEFT JOIN
Employees AS Manager
ON
Employees.ManagerID = Manager.EmployeeID
WHERE
Employees.EmployeeID = '087652';
```
Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in
sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
TODO: NESTED...
## Types
## Specimen
Admonition supports user-defined type qualifiers which may influence the style
of the inserted block. Following is a list of type qualifiers supported by the
Material theme, whereas the default type, and thus fallback for unknown type
qualifiers, is [hint](#hint).
!!! hint "hint, note <small>default</small>"
### Hint
!!! summary "summary, tldr"
This is a very long text, yes. I'm so sorry.
Example:
!!! tip "tip, idea"
``` markdown
!!! hint
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
```
!!! success "success, check, done"
Result:
!!! warning "warning, warn"
!!! hint
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
!!! failure "failure, fail, missing"
Qualifiers:
!!! fatal "danger, fatal"
* `hint`
* `note`
!!! bug "error, bug"
### Summary
Example:
``` markdown
!!! summary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
```
Result:
!!! summary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
Qualifiers:
* `summary`
* `tldr`
### Tip
Example:
``` markdown
!!! tip
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
```
Result:
!!! tip
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
Qualifiers:
* `tip`
* `idea`
### Success
Example:
``` markdown
!!! success
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
```
Result:
!!! success
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
Qualifiers:
* `success`
* `check`
* `done`
### Warning
Example:
``` markdown
!!! warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
```
Result:
!!! warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
Qualifiers:
* `warning`
* `attention`
* `important`
### Failure
Example:
``` markdown
!!! failure
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
```
Result:
!!! failure
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
Qualifiers:
* `failure`
* `fail`
* `missing`
### Danger
Example:
``` markdown
!!! danger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
```
Result:
!!! danger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
Qualifiers:
* `danger`
* `caution`
### Error
Example:
``` markdown
!!! error
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
```
Result:
!!! error
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.
Qualifiers:
* `error`
* `bug`
[Admonition]: https://pythonhosted.org/Markdown/extensions/admonition.html
[PyMdown Extensions]: https://facelessuser.github.io/pymdown-extensions

View File

@ -79,7 +79,7 @@ $md-icon-padding: $ms-base * 0.5;
$md-icon-margin: $ms-base * 0.25;
// Code blocks
$md-code-background: #F7F7F7;
$md-code-background: hsla(0, 0%, 0%, 0.035);
$md-code-color: #37474F;
// Keystrokes

View File

@ -48,7 +48,7 @@
max-height: 0vh; // TODO: can this be done in percent!?!?!?
opacity: 0;
transition: opacity .4s, max-height .4s;
.md-js__search--locked & {
[data-md-locked] & {
max-height: 75vh;
opacity: 1;
}
@ -56,9 +56,9 @@
position: absolute; // must be absolute, or header nav will stretch
background: $md-color-white;
// color: red;
border-top: px2rem(1px) solid $md-color-black--lightest; // TODO: box-shadow inset!
border-top: 0.1rem solid $md-color-black--lightest; // TODO: box-shadow inset!
text-align: left; // TODO: wrap with another div for this effect
border-radius: 0 0 px2rem(3px) px2rem(3px);
border-radius: 0 0 0.3rem 0.3rem;
z-index: -1;
// Override native scrollbar styles
@ -108,13 +108,13 @@
margin: 0;
padding: 0;
list-style-type: none;
border-top: px2rem(1px) solid $md-color-black--lightest;
border-top: 0.1rem solid $md-color-black--lightest;
}
&__item {
// background: yellow;
// border-top: px2rem(1px) solid $md-color-black--lightest;
// border-top: 0.1rem solid $md-color-black--lightest;
}
@ -161,10 +161,10 @@
//
//
// background: $md-color-white;
// border-radius: 0 0 px2rem(3px) px2rem(3px);
// border-radius: 0 0 0.3rem 0.3rem;
// color: #000000;
// text-align: left;
// border-top: px2rem(1px) solid $md-color-black--lightest;
// border-top: 0.1rem solid $md-color-black--lightest;
// display: none; // TODO: doesnt work due to display: none;
// opacity: 0;
//
@ -181,7 +181,7 @@
// }
.md-search__input:focus {
border-radius: px2rem(3px) px2rem(3px) 0 0;
border-radius: 0.3rem 0.3rem 0 0;
}
@include break-to-device(mobile landscape) {
@ -398,4 +398,6 @@ mark {
.md-search__output {
overflow-y: auto; // necessary for rounded borders
}
}
// TODO: integrate stylelint and property order!

View File

@ -132,7 +132,7 @@ kbd {
// Horizontal separators
hr {
margin: 2.4rem 0;
border-bottom: px2rem(1px) dotted $md-color-black--lighter;
border-bottom: 0.1rem dotted $md-color-black--lighter;
}
// Links
@ -223,14 +223,14 @@ kbd {
kbd {
display: inline-block;
padding: 0.4rem 0.5rem 0.5rem;
border: px2rem(1px) solid darken($md-keyboard-background, 20%);
border-radius: px2rem(3px);
border: 0.1rem solid darken($md-keyboard-background, 20%);
border-radius: 0.2rem;
border-bottom-color: darken($md-keyboard-background, 25%);
background-color: $md-keyboard-background;
color: $md-keyboard-color;
font-size: 85%;
line-height: 1.0rem;
box-shadow: 0 #{-(px2rem(1px))} 0
box-shadow: 0 -0.1rem 0
darken($md-keyboard-background, 30%) inset;
vertical-align: 0.1rem;
word-break: break-word;
@ -250,7 +250,7 @@ kbd {
// Blockquotes, possibly nested
blockquote {
padding-left: 1.2rem;
border-left: px2rem(4px) solid $md-color-black--lighter;
border-left: 0.4rem solid $md-color-black--lighter;
color: $md-color-black--light;
}

View File

@ -26,28 +26,12 @@
// Admonition extension
.admonition {
position: relative;
margin: 2.0rem 0;
padding: 0.8rem 1.6rem;
border-left: px2rem(32px) solid $clr-blue-a200;
border-radius: px2rem(2px);
padding: 0.8rem 1.2rem;
border-left: 0.4rem solid $clr-blue-a200;
border-radius: 0 0.2rem 0.2rem 0;
background: transparentize($clr-blue-a200, 0.95);
// Icon
&::before {
display: block;
position: absolute; // TODO: inherit icon!
top: 0.2rem;
left: -2.6rem;
float: left;
color: $md-color-white;
font-family: "Material Icons";
font-size: 2.0rem;
font-weight: normal;
content: "edit";
vertical-align: -0.1em;
}
// Title
&-title {
color: $clr-blue-a400;
@ -56,14 +40,24 @@
line-height: 2;
text-transform: uppercase;
// Ensure smaller spacing to next element
// Remove bottom spacing for title
html & {
margin-bottom: 1.6rem;
margin-bottom: 0;
}
// Ensure smaller spacing to next element
// Remove top spacing for first element following title
html & + * {
margin-top: 1.6rem;
margin-top: 0;
}
// Icon
&::before {
@extend %md-icon;
margin-right: 0.45em;
font-size: 2.0rem;
content: "edit";
vertical-align: -0.25em;
}
}
@ -82,9 +76,9 @@
summary tldr: $clr-light-blue-a400 "subject",
tip idea: $clr-teal-a700 "whatshot",
success check done: $clr-green-a400 "done",
warning warn: $clr-orange-a400 "warning",
warning attention important: $clr-orange-a400 "warning",
failure fail missing: $clr-red-a200 "clear",
danger fatal: $clr-red-a400 "flash_on",
danger caution: $clr-red-a400 "flash_on",
error bug: $clr-pink-a400 "bug_report"
) {
$tint: nth($appearance, 1);
@ -96,14 +90,14 @@
border-color: $tint;
background: transparentize($tint, 0.95);
// Icon
&::before {
content: $icon;
}
// Set color for title
.admonition-title {
color: $tint;
// Icon
&::before {
content: $icon;
}
}
}

View File

@ -20,6 +20,60 @@
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Variables
// ----------------------------------------------------------------------------
// Keywords
$codehilite-keyword: #3B78E7;
$codehilite-keyword-declaration: #3B78E7;
$codehilite-keyword-namespace: #3B78E7;
$codehilite-keyword-reserved: #3E61A2;
$codehilite-keyword-type: #3E61A2;
// Comments
$codehilite-comment: #999999;
$codehilite-comment-multiline: #999999;
$codehilite-comment-preproc: #666666;
$codehilite-comment-single: #999999;
$codehilite-comment-special: #999999;
// Names
$codehilite-name-attribute: #C2185B;
$codehilite-name-builtin: #C2185B;
$codehilite-name-builtin-pseudo: #3E61A2;
$codehilite-name-class: #C2185B;
$codehilite-name-constant: #3E61A2;
$codehilite-name-decorator: #666666;
$codehilite-name-entity: #666666;
$codehilite-name-exception: #C2185B;
$codehilite-name-function: #C2185B;
$codehilite-name-label: #3B5179;
$codehilite-name-namespace: #EC407A;
$codehilite-name-tag: #3B78E7;
$codehilite-name-variable: #3E61A2;
$codehilite-name-variable-class: #3E61A2;
$codehilite-name-variable-instance: #3E61A2;
$codehilite-name-variable-global: #3E61A2;
$codehilite-name-extension: #EC407A;
// Literals
$codehilite-literal-string: #0D904F; // #1eec86 for dark background
$codehilite-literal-string-backticks: #0D904F;
$codehilite-literal-string-char: #0D904F;
$codehilite-literal-string-doc: #999999;
$codehilite-literal-string-double: #0D904F;
$codehilite-literal-string-single: #0D904F;
$codehilite-literal-string-symbol: #0D904F;
// Numbers
$codehilite-literal-number: #E74C3C;
$codehilite-literal-number-float: #E74C3C;
$codehilite-literal-number-hex: #E74C3C;
$codehilite-literal-number-integer: #E74C3C;
$codehilite-literal-number-integer-long: #E74C3C;
$codehilite-literal-number-oct: #E74C3C;
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
@ -45,62 +99,62 @@
.gt { color: #AA0000; } // Generic.Traceback
// Keywords
.k { color: #A71D5D; } // Keyword
.k { color: $codehilite-keyword; }
.kc { color: #A71D5D; } // Keyword.Constant
.kd { color: #A71D5D; } // Keyword.Declaration
.kn { color: #A71D5D; } // Keyword.Namespace
.kd { color: $codehilite-keyword-declaration; }
.kn { color: $codehilite-keyword-namespace; }
.kp { color: #A71D5D; } // Keyword.Pseudo
.kr { color: #0086B3; } // Keyword.Reserved
.kt { color: #0086B3; } // Keyword.Type
.kr { color: $codehilite-keyword-reserved; }
.kt { color: $codehilite-keyword-type; }
// Comments
.c { color: #969896; } // Comment
.cm { color: #969896; } // Comment.Multiline
.cp { color: #666666; } // Comment.Preproc
.c1 { color: #969896; } // Comment.Single
.cs { color: #969896; } // Comment.Special
.c { color: $codehilite-comment; }
.cm { color: $codehilite-comment-multiline; }
.cp { color: $codehilite-comment-preproc; }
.c1 { color: $codehilite-comment-single; }
.cs { color: $codehilite-comment-special; }
// Names
.na { color: #795DA3; } // Name.Attribute
.na { color: #795DA3; } // Name.Attribute
.nb { color: #795DA3; } // Name.Builtin
.bp { color: #795DA3; } // Name.Builtin.Pseudo
.nc { color: #795DA3; } // Name.Class
.no { color: #795DA3; } // Name.Constant
.nd { color: #795DA3; } // Name.Decorator
.ni { color: #795DA3; } // Name.Entity
.ne { color: #795DA3; } // Name.Exception
.nf { color: #795DA3; } // Name.Function
.nl { color: #795DA3; } // Name.Label
.nn { color: #795DA3; } // Name.Namespace
.nt { color: #795DA3; } // Name.Tag
.nv { color: #795DA3; } // Name.Variable
.vc { color: #795DA3; } // Name.Variable.Class
.vg { color: #795DA3; } // Name.Variable.Global
.vi { color: #795DA3; } // Name.Variable.Instance
.ow { color: inherit; } // Operator.Word
.na { color: $codehilite-name-attribute; }
.nb { color: $codehilite-name-builtin; }
.bp { color: $codehilite-name-builtin-pseudo; }
.nc { color: $codehilite-name-class; }
.no { color: $codehilite-name-constant; }
.nd { color: $codehilite-name-entity; }
.ni { color: $codehilite-name-entity; }
.ne { color: $codehilite-name-exception; }
.nf { color: $codehilite-name-function; }
.nl { color: $codehilite-name-label; }
.nn { color: $codehilite-name-namespace; }
.nt { color: $codehilite-name-tag; }
.nv { color: $codehilite-name-variable; }
.vc { color: $codehilite-name-variable-class; }
.vg { color: $codehilite-name-variable-global; }
.vi { color: $codehilite-name-variable-instance; }
.nx { color: $codehilite-name-extension; }
.ow { color: inherit; }
// Numbers
.m { color: #0086B3; } // Literal.Number
.mf { color: #0086B3; } // Literal.Number.Float
.mh { color: #0086B3; } // Literal.Number.Hex
.mi { color: #0086B3; } // Literal.Number.Integer
.mo { color: #0086B3; } // Literal.Number.Oct
.il { color: #0086B3; } // Literal.Number.Integer.Long
.m { color: $codehilite-literal-number; }
.mf { color: $codehilite-literal-number-float; }
.mh { color: $codehilite-literal-number-hex; }
.mi { color: $codehilite-literal-number-integer; }
.il { color: $codehilite-literal-number-integer-long; }
.mo { color: $codehilite-literal-number-oct; }
// Strings
.s { color: #183691; } // Literal.String
.sb { color: #183691; } // Literal.String.Backtick
.sc { color: #183691; } // Literal.String.Char
.sd { color: #183691; } // Literal.String.Doc
.s2 { color: #183691; } // Literal.String.Double
.s { color: $codehilite-literal-string; }
.sb { color: $codehilite-literal-string-backticks; }
.sc { color: $codehilite-literal-string-char; }
.sd { color: $codehilite-literal-string-doc; }
.s2 { color: $codehilite-literal-string-double; }
.se { color: #183691; } // Literal.String.Escape
.sh { color: #183691; } // Literal.String.Heredoc
.si { color: #183691; } // Literal.String.Interpol
.sx { color: #183691; } // Literal.String.Other
.sr { color: #009926; } // Literal.String.Regex
.s1 { color: #D01040; } // Literal.String.Single
.ss { color: #990073; } // Literal.String.Symbol
.s1 { color: $codehilite-literal-string-single; }
.ss { color: $codehilite-literal-string-symbol; }
// Diffs
.gd { background-color: #FFDDDD; } // Generic.Deleted

View File

@ -44,24 +44,3 @@
@error "Invalid size: #{$size} - unit must be 'px'";
}
}
///
/// Convert font size in px to rem.
///
/// @group helpers
/// @access public
/// @param {Number} $size Font size in px
/// @param {Number} $base Base font size
/// @return {Number} Font size in rem
///
@function px2rem($size, $base: 10px) {
@if unit($size) == px {
@if unit($base) == px {
@return ($size / $base) * 1.0rem;
} @else {
@error "Invalid base: #{$base} - unit must be 'px'";
}
} @else {
@error "Invalid size: #{$size} - unit must be 'px'";
}
}

View File

@ -47,7 +47,7 @@ body {
min-height: 100%;
// Lock body to viewport height (e.g. in search mode)
&.md-js__body--locked {
&[data-md-locked] {
height: 100%;
overflow: hidden;
}
@ -56,7 +56,7 @@ body {
// Horizontal separators
hr {
display: block;
height: px2rem(1px);
height: 0.1rem;
padding: 0;
border: 0;
}

View File

@ -31,7 +31,7 @@
// Table of contents
&--secondary {
border-left: px2rem(4px) solid $md-color-primary;
border-left: 0.4rem solid $md-color-primary;
}
// List title

View File

@ -74,7 +74,7 @@
// Search form
&__form {
position: relative;
border-radius: px2rem(2px);
border-radius: 0.2rem;
text-align: right;
// [mobile -]: Add drop-shadow on mobile
@ -88,7 +88,7 @@
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
// Active search field
.md-js__search--locked & {
[data-md-locked] & {
width: 66.8rem;
}
}
@ -117,7 +117,7 @@
// Search field
&__input {
padding: 0 1.6rem 0 6.4rem;
border-radius: px2rem(2px);
border-radius: 0.2rem;
text-overflow: ellipsis;
// Placeholder and icon color in active state
@ -157,8 +157,8 @@
}
// Active search field
.md-js__search--locked & {
border-radius: px2rem(3px) px2rem(3px) 0 0;
[data-md-locked] & {
border-radius: 0.3rem 0.3rem 0 0;
background: $md-color-white;
color: $md-color-black;
text-overflow: none;

View File

@ -37,8 +37,8 @@
top: 5.6rem;
}
// Omit repaint of whole page by promoting primary sidebar - not the
// secondary sidebar, because then the thick line becomes jittery
// Omit repaint of whole page by promoting primary sidebar to a separate
// layer, but not the secondary sidebar to omit jittering
&--primary {
backface-visibility: hidden;
}
@ -151,7 +151,7 @@
// [screen +]: Add line for reference
@include break-from-device(screen) {
border-right: px2rem(1px) solid $md-color-black--lightest;
border-right: 0.1rem solid $md-color-black--lightest;
}
}
}