api-console-assets
Version:
This repo only exists to publish api console components to npm
380 lines (324 loc) • 8.57 kB
HTML
<!--
@license
Copyright 2016 The Advanced REST client authors <arc@mulesoft.com>
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->
<link rel="import" href="../polymer/polymer.html">
<!--
## Styles for markdown preview
It should be included where the `marked-element` is used.
## Usage example
```
<marked-element markdown="[[item.description]]">
<div class="markdown-html"></div>
</marked-element>
```
Note use of the `markdown-html` CSS rules. It is required by markdown element also all css rules
defined here are scoped to a container with this class name.
Custom property | Description | Default
----------------|-------------|----------
`--code-background-color` | Background color of the code block | `#f5f2f0`
`--arc-code-styles` | Mixin to override styles for markdown pre and code elements
@group UI Elements
@element markdown-styles
-->
<dom-module id="markdown-styles">
<template>
<style>
.markdown-html {
@apply(--arc-font-code1);
}
.markdown-html h1,
.markdown-html h2,
.markdown-html h3,
.markdown-html h4,
.markdown-html h5,
.markdown-html h6 {
@apply(--arc-font-title);
}
.markdown-html h1 tt,
.markdown-html h1 code,
.markdown-html h2 tt,
.markdown-html h2 code,
.markdown-html h3 tt,
.markdown-html h3 code,
.markdown-html h4 tt,
.markdown-html h4 code,
.markdown-html h5 tt,
.markdown-html h5 code,
.markdown-html h6 tt,
.markdown-html h6 code {
font-size: inherit
}
.markdown-html h1 {
@apply(--arc-font-display1);
border-bottom: 1px solid #eee;
padding-top: 1rem;
padding-bottom: 0.5rem;
}
.markdown-html h2 {
@apply(--arc-font-title);
border-bottom: 1px solid #eee;
}
.markdown-html h3 {
@apply(--arc-font-subhead);
font-size: 1.5em;
line-height: 1.43
}
.markdown-html h4 {
@apply(--arc-font-subhead);
font-size: 1.25em
}
.markdown-html h5 {
@apply(--arc-font-subhead);
font-size: 1em
}
.markdown-html h6 {
@apply(--arc-font-subhead);
font-size: 1em;
color: #777;
}
.markdown-html p,
.markdown-html blockquote,
.markdown-html ul,
.markdown-html ol,
.markdown-html dl,
.markdown-html table,
.markdown-html pre {
@apply(--arc-font-body1);
margin-top: 0;
margin-bottom: 16px
}
.markdown-html hr {
height: 4px;
padding: 0;
margin: 16px 0;
background-color: #e7e7e7;
border: 0 none
}
.markdown-html ul,
.markdown-html ol {
padding-left: 2em
}
.markdown-html ul.no-list,
.markdown-html ol.no-list {
padding: 0;
list-style-type: none
}
.markdown-html ul ul,
.markdown-html ul ol,
.markdown-html ol ol,
.markdown-html ol ul {
margin-top: 0;
margin-bottom: 0
}
.markdown-html li>p {
margin-top: 16px
}
.markdown-html dl {
padding: 0
}
.markdown-html dl dt {
padding: 0;
margin-top: 16px;
font-size: 1em;
font-style: italic;
font-weight: bold
}
.markdown-html dl dd {
padding: 0 16px;
margin-bottom: 16px
}
.markdown-html blockquote {
padding: 0 15px;
color: #777;
border-left: 4px solid #ddd
}
.markdown-html blockquote>:first-child {
margin-top: 0
}
.markdown-html blockquote>:last-child {
margin-bottom: 0
}
.markdown-html table {
@apply(--arc-font-body1);
display: block;
width: 100%;
overflow: auto;
word-break: normal;
word-break: keep-all;
border-collapse: collapse;
}
.markdown-html table th {
font-weight: bold
}
.markdown-html table th,
.markdown-html table td {
padding: 6px 13px;
border: 1px solid #ddd
}
.markdown-html table tr {
background-color: #fff;
border-top: 1px solid #ccc
}
.markdown-html table tr:nth-child(2n) {
background-color: #f8f8f8
}
.markdown-html img {
max-width: 100%;
box-sizing: content-box;
background-color: #fff
}
.markdown-html img[align=right] {
padding-left: 20px
}
.markdown-html img[align=left] {
padding-right: 20px
}
.markdown-html code,
.markdown-html tt {
@aplly(--arc-font-common-code);
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
background-color: rgba(0, 0, 0, 0.04);
border-radius: 2px
}
.markdown-html pre {
word-wrap: normal
}
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
.markdown-html code,
.markdown-html pre {
@apply(--arc-font-common-code);
color: black;
background: var(--code-background-color);
text-shadow: 0 1px white;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
@apply(--arc-code-styles);
}
.markdown-html pre::-moz-selection,
.markdown-html pre ::-moz-selection,
.markdown-html code::-moz-selection,
.markdown-html code ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
.markdown-html pre::selection,
.markdown-html pre ::selection,
.markdown-html code::selection,
.markdown-html code ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
.markdown-html code,
.markdown-html pre {
text-shadow: none;
}
}
/* Code blocks */
.markdown-html pre {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
.markdown-html :not(pre) > code,
.markdown-html pre,
pre.markdown-html {
background: var(--code-background-color, #f5f2f0);
}
/* Inline code */
.markdown-html :not(pre) > code {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.markdown-html .token.comment,
.markdown-html .token.prolog,
.markdown-html .token.doctype,
.markdown-html .token.cdata {
color: slategray;
}
.markdown-html .token.punctuation {
color: var(--code-punctuation-value-color, #999);
}
.markdown-html .namespace {
opacity: .7;
}
.markdown-html .token.property,
.markdown-html .token.tag,
.markdown-html .token.boolean,
.markdown-html .token.number,
.markdown-html .token.constant,
.markdown-html .token.symbol,
.markdown-html .token.deleted {
color: var(--code-type-number-value-color, #905);
}
.markdown-html .token.selector,
.markdown-html .token.attr-name,
.markdown-html .token.string,
.markdown-html .token.char,
.markdown-html .token.builtin,
.markdown-html .token.inserted {
color: var(--code-type-text-value-color, #690);
}
.markdown-html .token.operator,
.markdown-html .token.entity,
.markdown-html .token.url,
.markdown-html .language-css .token.string,
.markdown-html .style .token.string {
color: var(--code-punctuation-value-color, #a67f59);
background: hsla(0, 0%, 100%, .5);
}
.markdown-html .token.atrule,
.markdown-html .token.attr-value,
.markdown-html .token.keyword {
color: #07a;
}
.markdown-html .token.function {
color: #DD4A68;
}
.markdown-html .token.regex,
.markdown-html .token.important,
.markdown-html .token.variable {
color: #e90;
}
.markdown-html .token.important,
.markdown-html .token.bold {
font-weight: bold;
}
.markdown-html .token.italic {
font-style: italic;
}
.markdown-html .token.entity {
cursor: help;
}
</style>
</template>
</dom-module>