diff --git a/mkdocs.yml b/mkdocs.yml index d90dbb0ec..a2a9c0bd7 100755 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -85,6 +85,7 @@ extra: # Extensions markdown_extensions: - markdown.extensions.admonition + - markdown.extensions.attr_list - markdown.extensions.codehilite: guess_lang: false - markdown.extensions.def_list diff --git a/src/assets/stylesheets/layout/_button.scss b/src/assets/stylesheets/layout/_button.scss new file mode 100644 index 000000000..0da1c0d61 --- /dev/null +++ b/src/assets/stylesheets/layout/_button.scss @@ -0,0 +1,58 @@ +//// +/// Copyright (c) 2016-2020 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 +//// + +// ---------------------------------------------------------------------------- +// Rules +// ---------------------------------------------------------------------------- + +// Scoped in typesetted content to match specificity of regular content +.md-typeset { + + // Button + .md-button { + display: inline-block; + padding: px2em(10px, 16px) px2em(32px, 16px); + color: var(--md-primary-fg-color); + font-weight: 700; + border: px2rem(2px) solid currentColor; + border-radius: px2rem(2px); + transition: + background-color 125ms, + color 125ms, + border-color 125ms; + + // Primary button + &--primary { + color: var(--md-primary-bg-color); + background-color: var(--md-primary-fg-color); + border-color: var(--md-primary-fg-color); + } + + // Focused or hovered button + &:focus, + &:hover { + color: var(--md-accent-bg-color); + background-color: var(--md-accent-fg-color); + border-color: var(--md-accent-fg-color); + } + } +} diff --git a/src/assets/stylesheets/main.scss b/src/assets/stylesheets/main.scss index c6ef0626d..8de27495a 100644 --- a/src/assets/stylesheets/main.scss +++ b/src/assets/stylesheets/main.scss @@ -44,6 +44,7 @@ @import "layout/base"; @import "layout/announce"; +@import "layout/button"; @import "layout/clipboard"; @import "layout/content"; @import "layout/dialog";