Better styling of blockquote elements
Blockquote elements that call out a new feature are given a "pink" background, whereas all others are given a "blue" background. This is to help avoid cases where users expect a feature to work for their version when they are several versions behind when a feature was introduced.
This commit is contained in:
@@ -228,6 +228,16 @@ pre {
|
||||
color: #4d4d4c;
|
||||
margin: 2em 0;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 4px solid #5bc0de;
|
||||
background-color: #f4f8fa;
|
||||
padding: 15px 15px 1px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
blockquote.new-as-of {
|
||||
border-left: 4px solid #ef5b58;
|
||||
background-color: #f9ad76;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.quickstart-code {
|
||||
font-size: 14px;
|
||||
|
||||
@@ -17,6 +17,16 @@
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 4px solid #5bc0de;
|
||||
background-color: #f4f8fa;
|
||||
padding: 15px 15px 1px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
blockquote.new-as-of {
|
||||
border-left: 4px solid #ef5b58;
|
||||
background-color: #f9ad76;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -79,7 +89,8 @@
|
||||
anchors.options.visible = 'always';
|
||||
anchors.add('.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4');
|
||||
|
||||
var elements = document.querySelectorAll('table'),
|
||||
var tables = document.querySelectorAll('table'),
|
||||
blockquotes = document.querySelectorAll('blockquote'),
|
||||
classNames = ['table', 'table-striped', 'table-hover', 'table-condensed'],
|
||||
addClass = function (el, className) {
|
||||
if (el.classList) {
|
||||
@@ -89,8 +100,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
Array.prototype.forEach.call(blockquotes, function (el, i) {
|
||||
if (el.innerHTML.indexOf('New as of') !== -1) {
|
||||
addClass(el, 'new-as-of');
|
||||
}
|
||||
});
|
||||
Array.prototype.forEach.call(classNames, function (className, i) {
|
||||
Array.prototype.forEach.call(elements, function (el, i) {
|
||||
Array.prototype.forEach.call(tables, function (el, i) {
|
||||
addClass(el, className);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user