* fix: convert propStyle to propClassbubble
@@ -2,7 +2,7 @@ import React, { Component } from "react" | |||
import PropTypes from "prop-types" | |||
import ImPropTypes from "react-immutable-proptypes" | |||
const propStyle = { color: "#999", fontStyle: "italic" } | |||
const propClass = "property" | |||
export default class ArrayModel extends Component { | |||
static propTypes = { | |||
@@ -44,7 +44,7 @@ export default class ArrayModel extends Component { | |||
<ModelCollapse title={titleEl} expanded={ depth <= expandDepth } collapsedContent="[...]"> | |||
[ | |||
{ | |||
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null | |||
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null | |||
} | |||
{ | |||
!description ? (properties.size ? <div className="markdown"></div> : null) : | |||
@@ -15,8 +15,8 @@ export default class AuthError extends React.Component { | |||
let source = error.get("source") | |||
return ( | |||
<div className="errors" style={{ backgroundColor: "#ffeeee", color: "red", margin: "1em" }}> | |||
<b style={{ textTransform: "capitalize", marginRight: "1em"}} >{ source } { level }</b> | |||
<div className="errors"> | |||
<b>{ source } { level }</b> | |||
<span>{ message }</span> | |||
</div> | |||
) | |||
@@ -20,7 +20,7 @@ export default class Curl extends React.Component { | |||
<div> | |||
<h4>Curl</h4> | |||
<div className="copy-paste"> | |||
<textarea onFocus={this.handleFocus} readOnly={true} className="curl" style={{ whiteSpace: "normal" }} value={curl}></textarea> | |||
<textarea onFocus={this.handleFocus} readOnly={true} className="curl" value={curl}></textarea> | |||
</div> | |||
</div> | |||
) | |||
@@ -72,10 +72,10 @@ const ThrownErrorItem = ( { error, jumpToLine } ) => { | |||
<h4>{ (error.get("source") && error.get("level")) ? | |||
toTitleCase(error.get("source")) + " " + error.get("level") : "" } | |||
{ error.get("path") ? <small> at {error.get("path")}</small>: null }</h4> | |||
<span style={{ whiteSpace: "pre-line", "maxWidth": "100%" }}> | |||
<span className="message thrown"> | |||
{ error.get("message") } | |||
</span> | |||
<div style={{ "text-decoration": "underline", "cursor": "pointer" }}> | |||
<div className="error-line"> | |||
{ errorLine && jumpToLine ? <a onClick={jumpToLine.bind(null, errorLine)}>Jump to line { errorLine }</a> : null } | |||
</div> | |||
</div> | |||
@@ -102,8 +102,8 @@ const SpecErrorItem = ( { error, jumpToLine } ) => { | |||
{ !error ? null : | |||
<div> | |||
<h4>{ toTitleCase(error.get("source")) + " " + error.get("level") } { locationMessage }</h4> | |||
<span style={{ whiteSpace: "pre-line"}}>{ error.get("message") }</span> | |||
<div style={{ "text-decoration": "underline", "cursor": "pointer" }}> | |||
<span className="message">{ error.get("message") }</span> | |||
<div className="error-line"> | |||
{ jumpToLine ? ( | |||
<a onClick={jumpToLine.bind(null, error.get("line"))}>Jump to line { error.get("line") }</a> | |||
) : null } | |||
@@ -2,7 +2,7 @@ import React from "react" | |||
import PropTypes from "prop-types" | |||
import Im from "immutable" | |||
const propStyle = { color: "#999", fontStyle: "italic" } | |||
const propClass = "header-example" | |||
export default class Headers extends React.Component { | |||
static propTypes = { | |||
@@ -46,7 +46,7 @@ export default class Headers extends React.Component { | |||
<td className="header-col">{ | |||
!description ? null : <Markdown source={ description } /> | |||
}</td> | |||
<td className="header-col">{ type } { schemaExample ? <Property propKey={ "Example" } propVal={ schemaExample } propStyle={ propStyle } /> : null }</td> | |||
<td className="header-col">{ type } { schemaExample ? <Property propKey={ "Example" } propVal={ schemaExample } propClass={ propClass } /> : null }</td> | |||
</tr>) | |||
}).toArray() | |||
} | |||
@@ -73,10 +73,14 @@ export class Col extends React.Component { | |||
} | |||
} | |||
if (hide) { | |||
classesAr.push("hidden") | |||
} | |||
let classes = xclass(rest.className, ...classesAr) | |||
return ( | |||
<section {...rest} style={{display: hide ? "none": null}} className={classes}/> | |||
<section {...rest} className={classes}/> | |||
) | |||
} | |||
@@ -213,7 +217,7 @@ Link.propTypes = { | |||
className: PropTypes.string | |||
} | |||
const NoMargin = ({children}) => <div style={{height: "auto", border: "none", margin: 0, padding: 0}}> {children} </div> | |||
const NoMargin = ({children}) => <div className="no-margin"> {children} </div> | |||
NoMargin.propTypes = { | |||
children: PropTypes.node | |||
@@ -57,7 +57,7 @@ export default class BaseLayout extends React.Component { | |||
if (loadingStatus === "failedConfig") { | |||
const lastErr = errSelectors.lastError() | |||
const lastErrMsg = lastErr ? lastErr.get("message") : "" | |||
loadingMessage = <div className="info" style={{ maxWidth: "880px", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}> | |||
loadingMessage = <div className="info failed-config"> | |||
<div className="loading-container"> | |||
<h4 className="title">Failed to load remote configuration.</h4> | |||
<p>{lastErrMsg}</p> | |||
@@ -71,8 +71,8 @@ export default class ModelCollapse extends Component { | |||
return ( | |||
<span className={classes || ""}> | |||
{ title && <span onClick={this.toggleCollapsed} style={{ "cursor": "pointer" }}>{title}</span> } | |||
<span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}> | |||
{ title && <span onClick={this.toggleCollapsed} className="pointer">{title}</span> } | |||
<span onClick={ this.toggleCollapsed } className="pointer"> | |||
<span className={ "model-toggle" + ( this.state.expanded ? "" : " collapsed" ) }></span> | |||
</span> | |||
{ this.state.expanded ? this.props.children :this.state.collapsedContent } | |||
@@ -53,11 +53,7 @@ export default class Model extends ImmutablePureComponent { | |||
if(!schema) { | |||
return <span className="model model-title"> | |||
<span className="model-title__text">{ displayName || name }</span> | |||
<img src={require("core/../img/rolling-load.svg")} height={"20px"} width={"20px"} style={{ | |||
marginLeft: "1em", | |||
position: "relative", | |||
bottom: "0px" | |||
}} /> | |||
<img src={require("core/../img/rolling-load.svg")} height={"20px"} width={"20px"} /> | |||
</span> | |||
} | |||
@@ -79,8 +79,8 @@ export default class ObjectModel extends Component { | |||
{ | |||
<table className="model"><tbody> | |||
{ | |||
!description ? null : <tr style={{ color: "#666", fontWeight: "normal" }}> | |||
<td style={{ fontWeight: "bold" }}>description:</td> | |||
!description ? null : <tr className="description"> | |||
<td>description:</td> | |||
<td> | |||
<Markdown source={ description } /> | |||
</td> | |||
@@ -91,16 +91,22 @@ export default class ObjectModel extends Component { | |||
([key, value]) => { | |||
let isDeprecated = isOAS3() && value.get("deprecated") | |||
let isRequired = List.isList(requiredProperties) && requiredProperties.contains(key) | |||
let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" } | |||
if ( isRequired ) { | |||
propertyStyle.fontWeight = "bold" | |||
let classNames = ["property-row"] | |||
if (isDeprecated) { | |||
classNames.push("deprecated") | |||
} | |||
if (isRequired) { | |||
classNames.push("required") | |||
} | |||
return (<tr key={key} className={isDeprecated && "deprecated"}> | |||
<td style={ propertyStyle }> | |||
{ key }{ isRequired && <span style={{ color: "red" }}>*</span> } | |||
return (<tr key={key} className={classNames.join(" ")}> | |||
<td> | |||
{ key }{ isRequired && <span className="star">*</span> } | |||
</td> | |||
<td style={{ verticalAlign: "top" }}> | |||
<td> | |||
<Model key={ `object-${name}-${key}_${value}` } { ...otherProps } | |||
required={ isRequired } | |||
getComponent={ getComponent } | |||
@@ -126,11 +132,11 @@ export default class ObjectModel extends Component { | |||
const normalizedValue = !value ? null : value.toJS ? value.toJS() : value | |||
return (<tr key={key} style={{ color: "#777" }}> | |||
return (<tr key={key} className="extension"> | |||
<td> | |||
{ key } | |||
</td> | |||
<td style={{ verticalAlign: "top" }}> | |||
<td> | |||
{ JSON.stringify(normalizedValue) } | |||
</td> | |||
</tr>) | |||
@@ -53,7 +53,7 @@ export default class OnlineValidatorBadge extends React.Component { | |||
return null | |||
} | |||
return (<span style={{ float: "right"}}> | |||
return (<span className="float-right"> | |||
<a target="_blank" rel="noopener noreferrer" href={`${ sanitizedValidatorUrl }/debug?url=${ encodeURIComponent(this.state.url) }`}> | |||
<ValidatorImage src={`${ sanitizedValidatorUrl }?url=${ encodeURIComponent(this.state.url) }`} alt="Online validator badge"/> | |||
</a> | |||
@@ -97,7 +97,7 @@ export class OperationLink extends React.Component { | |||
let { id, method, shown, href } = this.props | |||
return ( | |||
<Link href={ href } style={{fontWeight: shown ? "bold" : "normal"}} onClick={this.onClick} className="block opblock-link"> | |||
<Link href={ href } onClick={this.onClick} className={`block opblock-link ${shown ? "shown" : ""}`}> | |||
<div> | |||
<small className={`bold-label-${method}`}>{method.toUpperCase()}</small> | |||
<span className="bold-label" >{id}</span> | |||
@@ -262,7 +262,7 @@ export default class ParameterRow extends Component { | |||
<td className="parameters-col_name"> | |||
<div className={required ? "parameter__name required" : "parameter__name"}> | |||
{ param.get("name") } | |||
{ !required ? null : <span style={{color: "red"}}> *</span> } | |||
{ !required ? null : <span> *</span> } | |||
</div> | |||
<div className="parameter__type"> | |||
{ type } | |||
@@ -2,7 +2,7 @@ import React, { Component } from "react" | |||
import PropTypes from "prop-types" | |||
import { getExtensions } from "core/utils" | |||
const propStyle = { color: "#6b6b6b", fontStyle: "italic" } | |||
const propClass = "property primitive" | |||
export default class Primitive extends Component { | |||
static propTypes = { | |||
@@ -44,19 +44,19 @@ export default class Primitive extends Component { | |||
<span className="prop-type">{ type }</span> | |||
{ format && <span className="prop-format">(${format})</span>} | |||
{ | |||
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null | |||
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null | |||
} | |||
{ | |||
showExtensions && extensions.size ? extensions.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null | |||
showExtensions && extensions.size ? extensions.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null | |||
} | |||
{ | |||
!description ? null : | |||
<Markdown source={ description } /> | |||
} | |||
{ | |||
xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span> | |||
xml && xml.size ? (<span><br /><span className={ propClass }>xml:</span> | |||
{ | |||
xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }><br/> {key}: { String(v) }</span>).toArray() | |||
xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} className={ propClass }><br/> {key}: { String(v) }</span>).toArray() | |||
} | |||
</span>): null | |||
} | |||
@@ -1,16 +1,16 @@ | |||
import React from "react" | |||
import PropTypes from "prop-types" | |||
export const Property = ({ propKey, propVal, propStyle }) => { | |||
export const Property = ({ propKey, propVal, propClass }) => { | |||
return ( | |||
<span style={ propStyle }> | |||
<span className={ propClass }> | |||
<br />{ propKey }: { String(propVal) }</span> | |||
) | |||
} | |||
Property.propTypes = { | |||
propKey: PropTypes.string, | |||
propVal: PropTypes.any, | |||
propStyle: PropTypes.object | |||
propClass: PropTypes.string | |||
} | |||
export default Property |
@@ -118,7 +118,7 @@ export default class ResponseBody extends React.PureComponent { | |||
if(contentType.includes("svg")) { | |||
bodyEl = <div> { content } </div> | |||
} else { | |||
bodyEl = <img style={{ maxWidth: "100%" }} src={ window.URL.createObjectURL(content) } /> | |||
bodyEl = <img className="full-width" src={ window.URL.createObjectURL(content) } /> | |||
} | |||
// Audio | |||
@@ -1,11 +1,7 @@ | |||
import React from "react" | |||
const SvgAssets = () => | |||
<div> | |||
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" style={{ | |||
position: "absolute", | |||
width: 0, | |||
height: 0 | |||
}}> | |||
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" className="svg-assets"> | |||
<defs> | |||
<symbol viewBox="0 0 20 20" id="unlocked"> | |||
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path> | |||
@@ -23,18 +23,18 @@ export default class FilterContainer extends React.Component { | |||
const isFailed = specSelectors.loadingStatus() === "failed" | |||
const filter = layoutSelectors.currentFilter() | |||
const inputStyle = {} | |||
if (isFailed) inputStyle.color = "red" | |||
if (isLoading) inputStyle.color = "#aaa" | |||
const classNames = ["operation-filter-input"] | |||
if (isFailed) classNames.push("failed") | |||
if (isLoading) classNames.push("loading") | |||
return ( | |||
<div> | |||
{filter === null || filter === false ? null : | |||
<div className="filter-container"> | |||
<Col className="filter wrapper" mobile={12}> | |||
<input className="operation-filter-input" placeholder="Filter by tag" type="text" | |||
<input className={classNames.join(" ")} placeholder="Filter by tag" type="text" | |||
onChange={this.onFilterChange} value={filter === true || filter === "true" ? "" : filter} | |||
disabled={isLoading} style={inputStyle}/> | |||
disabled={isLoading}/> | |||
</Col> | |||
</div> | |||
} | |||
@@ -12,8 +12,8 @@ class OperationLink extends Component { | |||
let parameters = link.get("parameters") && link.get("parameters").toJS() | |||
let description = link.get("description") | |||
return <div style={{ marginBottom: "1.5em" }}> | |||
<div style={{ marginBottom: ".5em" }}> | |||
return <div className="operation-link"> | |||
<div className="description"> | |||
<b><code>{name}</code></b> | |||
{ description ? <Markdown source={description}></Markdown> : null } | |||
</div> | |||
@@ -145,7 +145,7 @@ const RequestBody = ({ | |||
<td className="parameters-col_name"> | |||
<div className={required ? "parameter__name required" : "parameter__name"}> | |||
{ key } | |||
{ !required ? null : <span style={{color: "red"}}> *</span> } | |||
{ !required ? null : <span> *</span> } | |||
</div> | |||
<div className="parameter__type"> | |||
{ type } | |||
@@ -6,7 +6,7 @@ export default OAS3ComponentWrapFactory((props) => { | |||
return <span> | |||
<Ori {...props} /> | |||
<small style={{ backgroundColor: "#89bf04" }}> | |||
<small className="version-stamp"> | |||
<pre className="version">OAS3</pre> | |||
</small> | |||
</span> | |||
@@ -76,10 +76,9 @@ const createClass = component => class extends Component { | |||
} | |||
} | |||
const Fallback = ({ name }) => <div style={{ // eslint-disable-line react/prop-types | |||
padding: "1em", | |||
"color": "#aaa" | |||
}}>😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i></div> | |||
const Fallback = ({ | |||
name // eslint-disable-line react/prop-types | |||
}) => <div className="fallback">😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i></div> | |||
const wrapRender = (component) => { | |||
const isStateless = component => !(component.prototype && component.prototype.isReactComponent) | |||
@@ -307,15 +307,15 @@ export function highlight (el) { | |||
// (some types are highlighted similarly) | |||
el[appendChild]( | |||
node = _document.createElement("span") | |||
).setAttribute("style", [ | |||
).setAttribute("class", [ | |||
// 0: not formatted | |||
"color: #555; font-weight: bold;", | |||
"token-not-formatted", | |||
// 1: keywords | |||
"", | |||
// 2: punctuation | |||
"", | |||
// 3: strings and regexps | |||
"color: #555;", | |||
"token-string", | |||
// 4: comments | |||
"" | |||
][ | |||
@@ -104,10 +104,10 @@ export default class Topbar extends React.Component { | |||
let isLoading = specSelectors.loadingStatus() === "loading" | |||
let isFailed = specSelectors.loadingStatus() === "failed" | |||
let inputStyle = {} | |||
if(isFailed) inputStyle.color = "red" | |||
if(isLoading) inputStyle.color = "#aaa" | |||
const classNames = ["download-url-input"] | |||
if (isFailed) classNames.push("failed") | |||
if (isLoading) classNames.push("loading") | |||
const { urls } = getConfigs() | |||
let control = [] | |||
let formOnSubmit = null | |||
@@ -128,7 +128,7 @@ export default class Topbar extends React.Component { | |||
} | |||
else { | |||
formOnSubmit = this.downloadUrl | |||
control.push(<input className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />) | |||
control.push(<input className={classNames.join(" ")} type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} />) | |||
control.push(<Button className="download-url-button" onClick={ this.downloadUrl }>Explore</Button>) | |||
} | |||
@@ -65,7 +65,19 @@ | |||
border-radius: 4px; | |||
background-color: #ffeeee; | |||
color: red; | |||
margin: 1em; | |||
@include text_code(); | |||
b | |||
{ | |||
text-transform: capitalize; | |||
margin-right: 1em; | |||
} | |||
} | |||
} | |||
@@ -29,6 +29,22 @@ | |||
{ | |||
color: $errors-wrapper-errors-small-font-color; | |||
} | |||
.message | |||
{ | |||
white-space: pre-line; | |||
&.thrown | |||
{ | |||
max-width: 100%; | |||
} | |||
} | |||
.error-line | |||
{ | |||
text-decoration: underline; | |||
cursor: pointer; | |||
} | |||
} | |||
hgroup | |||
@@ -2,6 +2,14 @@ | |||
{ | |||
margin: 50px 0; | |||
&.failed-config | |||
{ | |||
max-width: 880px; | |||
margin-left: auto; | |||
margin-right: auto; | |||
text-align: center | |||
} | |||
hgroup.main | |||
{ | |||
margin: 0 0 20px 0; | |||
@@ -78,6 +86,11 @@ | |||
border-radius: 57px; | |||
background: $info-title-small-background-color; | |||
&.version-stamp | |||
{ | |||
background-color: #89bf04; | |||
} | |||
pre | |||
{ | |||
@@ -419,6 +419,19 @@ | |||
} | |||
} | |||
.filter, .download-url-wrapper | |||
{ | |||
.failed | |||
{ | |||
color: red; | |||
} | |||
.loading | |||
{ | |||
color: #aaa; | |||
} | |||
} | |||
.model-example { | |||
margin-top: 1em; | |||
} | |||
@@ -553,6 +566,11 @@ | |||
@include text_body(); | |||
} | |||
.curl | |||
{ | |||
white-space: normal; | |||
} | |||
} | |||
.response-col_status | |||
@@ -583,6 +601,16 @@ | |||
@include text_code($response-col-links-font-color); | |||
} | |||
.operation-link | |||
{ | |||
margin-bottom: 1.5em; | |||
.description | |||
{ | |||
margin-bottom: 0.5em; | |||
} | |||
} | |||
} | |||
.opblock-body | |||
@@ -793,6 +821,35 @@ | |||
} | |||
} | |||
.hidden | |||
{ | |||
display: none; | |||
} | |||
.no-margin | |||
{ | |||
height: auto; | |||
border: none; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
.float-right | |||
{ | |||
float: right; | |||
} | |||
img.full-width | |||
{ | |||
width: 100%; | |||
} | |||
.svg-assets | |||
{ | |||
position: absolute; | |||
width: 0; | |||
height: 0; | |||
} | |||
section | |||
{ | |||
@@ -815,6 +872,12 @@ a.nostyle { | |||
} | |||
} | |||
.fallback | |||
{ | |||
padding: 1em; | |||
color: #aaa; | |||
} | |||
.version-pragma { | |||
height: 100%; | |||
padding: 5em 0px; | |||
@@ -841,3 +904,27 @@ a.nostyle { | |||
} | |||
} | |||
} | |||
.opblock-link | |||
{ | |||
font-weight: normal; | |||
&.shown | |||
{ | |||
font-weight: bold; | |||
} | |||
} | |||
span | |||
{ | |||
&.token-string | |||
{ | |||
color: #555; | |||
} | |||
&.token-not-formatted | |||
{ | |||
color: #555; | |||
font-weight: bold; | |||
} | |||
} |
@@ -97,8 +97,68 @@ | |||
{ | |||
margin: 0 0 1em 0; | |||
} | |||
.property | |||
{ | |||
color: #999; | |||
font-style: italic; | |||
&.primitive | |||
{ | |||
color: #6b6b6b; | |||
} | |||
} | |||
} | |||
table.model | |||
{ | |||
tr | |||
{ | |||
&.description | |||
{ | |||
color: #666; | |||
font-weight: normal; | |||
td:first-child | |||
{ | |||
font-weight: bold; | |||
} | |||
} | |||
&.property-row | |||
{ | |||
&.required td:first-child | |||
{ | |||
font-weight: bold; | |||
} | |||
td | |||
{ | |||
vertical-align: top; | |||
&:first-child | |||
{ | |||
padding-right: 0.2em; | |||
} | |||
} | |||
.star | |||
{ | |||
color: red; | |||
} | |||
} | |||
&.extension | |||
{ | |||
color: #777; | |||
td:last-child | |||
{ | |||
vertical-align: top; | |||
} | |||
} | |||
} | |||
} | |||
section.models | |||
{ | |||
@@ -107,6 +167,11 @@ section.models | |||
border: 1px solid rgba($section-models-border-color, .3); | |||
border-radius: 4px; | |||
.pointer | |||
{ | |||
cursor: pointer; | |||
} | |||
&.is-open | |||
{ | |||
padding: 0 0 20px; | |||
@@ -229,6 +294,13 @@ section.models | |||
font-size: 16px; | |||
@include text_headline($section-models-model-title-font-color); | |||
img | |||
{ | |||
margin-left: 1em; | |||
position: relative; | |||
bottom: 0px; | |||
} | |||
} | |||
.model-deprecated-warning | |||
@@ -38,6 +38,12 @@ table | |||
@include text_code(); | |||
} | |||
.header-example | |||
{ | |||
color: #999; | |||
font-style: italic; | |||
} | |||
} | |||
tbody | |||
@@ -112,6 +118,11 @@ table | |||
{ | |||
font-weight: bold; | |||
span | |||
{ | |||
color: red; | |||
} | |||
&:after | |||
{ | |||
font-size: 10px; | |||