Skip to content

Commit fc3ed30

Browse files
tomdegoedetomdegoede
authoredJun 10, 2020
improvement: Move inline styles to SCSS instead (#5578)
* fix: convert propStyle to propClass
·
v5.20.2v3.26.1
1 parent 67627d7 commit fc3ed30

30 files changed

+282
-70
lines changed
 

‎src/core/components/array-model.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { Component } from "react"
22
import PropTypes from "prop-types"
33
import ImPropTypes from "react-immutable-proptypes"
44

5-
const propStyle = { color: "#999", fontStyle: "italic" }
5+
const propClass = "property"
66

77
export default class ArrayModel extends Component {
88
static propTypes = {
@@ -44,7 +44,7 @@ export default class ArrayModel extends Component {
4444
<ModelCollapse title={titleEl} expanded={ depth <= expandDepth } collapsedContent="[...]">
4545
[
4646
{
47-
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
47+
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
4848
}
4949
{
5050
!description ? (properties.size ? <div className="markdown"></div> : null) :

‎src/core/components/auth/error.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export default class AuthError extends React.Component {
1515
let source = error.get("source")
1616

1717
return (
18-
<div className="errors" style={{ backgroundColor: "#ffeeee", color: "red", margin: "1em" }}>
19-
<b style={{ textTransform: "capitalize", marginRight: "1em"}} >{ source } { level }</b>
18+
<div className="errors">
19+
<b>{ source } { level }</b>
2020
<span>{ message }</span>
2121
</div>
2222
)

‎src/core/components/curl.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default class Curl extends React.Component {
2020
<div>
2121
<h4>Curl</h4>
2222
<div className="copy-paste">
23-
<textarea onFocus={this.handleFocus} readOnly={true} className="curl" style={{ whiteSpace: "normal" }} value={curl}></textarea>
23+
<textarea onFocus={this.handleFocus} readOnly={true} className="curl" value={curl}></textarea>
2424
</div>
2525
</div>
2626
)

‎src/core/components/errors.jsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,10 @@ const ThrownErrorItem = ( { error, jumpToLine } ) => {
7272
<h4>{ (error.get("source") && error.get("level")) ?
7373
toTitleCase(error.get("source")) + " " + error.get("level") : "" }
7474
{ error.get("path") ? <small> at {error.get("path")}</small>: null }</h4>
75-
<span style={{ whiteSpace: "pre-line", "maxWidth": "100%" }}>
75+
<span className="message thrown">
7676
{ error.get("message") }
7777
</span>
78-
<div style={{ "text-decoration": "underline", "cursor": "pointer" }}>
78+
<div className="error-line">
7979
{ errorLine && jumpToLine ? <a onClick={jumpToLine.bind(null, errorLine)}>Jump to line { errorLine }</a> : null }
8080
</div>
8181
</div>
@@ -102,8 +102,8 @@ const SpecErrorItem = ( { error, jumpToLine } ) => {
102102
{ !error ? null :
103103
<div>
104104
<h4>{ toTitleCase(error.get("source")) + " " + error.get("level") }&nbsp;{ locationMessage }</h4>
105-
<span style={{ whiteSpace: "pre-line"}}>{ error.get("message") }</span>
106-
<div style={{ "text-decoration": "underline", "cursor": "pointer" }}>
105+
<span className="message">{ error.get("message") }</span>
106+
<div className="error-line">
107107
{ jumpToLine ? (
108108
<a onClick={jumpToLine.bind(null, error.get("line"))}>Jump to line { error.get("line") }</a>
109109
) : null }

‎src/core/components/headers.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react"
22
import PropTypes from "prop-types"
33
import Im from "immutable"
44

5-
const propStyle = { color: "#999", fontStyle: "italic" }
5+
const propClass = "header-example"
66

77
export default class Headers extends React.Component {
88
static propTypes = {
@@ -46,7 +46,7 @@ export default class Headers extends React.Component {
4646
<td className="header-col">{
4747
!description ? null : <Markdown source={ description } />
4848
}</td>
49-
<td className="header-col">{ type } { schemaExample ? <Property propKey={ "Example" } propVal={ schemaExample } propStyle={ propStyle } /> : null }</td>
49+
<td className="header-col">{ type } { schemaExample ? <Property propKey={ "Example" } propVal={ schemaExample } propClass={ propClass } /> : null }</td>
5050
</tr>)
5151
}).toArray()
5252
}

‎src/core/components/layout-utils.jsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,14 @@ export class Col extends React.Component {
7373
}
7474
}
7575

76+
if (hide) {
77+
classesAr.push("hidden")
78+
}
79+
7680
let classes = xclass(rest.className, ...classesAr)
7781

7882
return (
79-
<section {...rest} style={{display: hide ? "none": null}} className={classes}/>
83+
<section {...rest} className={classes}/>
8084
)
8185
}
8286

@@ -213,7 +217,7 @@ Link.propTypes = {
213217
className: PropTypes.string
214218
}
215219

216-
const NoMargin = ({children}) => <div style={{height: "auto", border: "none", margin: 0, padding: 0}}> {children} </div>
220+
const NoMargin = ({children}) => <div className="no-margin"> {children} </div>
217221

218222
NoMargin.propTypes = {
219223
children: PropTypes.node

‎src/core/components/layouts/base.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default class BaseLayout extends React.Component {
5757
if (loadingStatus === "failedConfig") {
5858
const lastErr = errSelectors.lastError()
5959
const lastErrMsg = lastErr ? lastErr.get("message") : ""
60-
loadingMessage = <div className="info" style={{ maxWidth: "880px", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
60+
loadingMessage = <div className="info failed-config">
6161
<div className="loading-container">
6262
<h4 className="title">Failed to load remote configuration.</h4>
6363
<p>{lastErrMsg}</p>

‎src/core/components/model-collapse.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@ export default class ModelCollapse extends Component {
7171

7272
return (
7373
<span className={classes || ""}>
74-
{ title && <span onClick={this.toggleCollapsed} style={{ "cursor": "pointer" }}>{title}</span> }
75-
<span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}>
74+
{ title && <span onClick={this.toggleCollapsed} className="pointer">{title}</span> }
75+
<span onClick={ this.toggleCollapsed } className="pointer">
7676
<span className={ "model-toggle" + ( this.state.expanded ? "" : " collapsed" ) }></span>
7777
</span>
7878
{ this.state.expanded ? this.props.children :this.state.collapsedContent }

‎src/core/components/model.jsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,7 @@ export default class Model extends ImmutablePureComponent {
5353
if(!schema) {
5454
return <span className="model model-title">
5555
<span className="model-title__text">{ displayName || name }</span>
56-
<img src={require("core/../img/rolling-load.svg")} height={"20px"} width={"20px"} style={{
57-
marginLeft: "1em",
58-
position: "relative",
59-
bottom: "0px"
60-
}} />
56+
<img src={require("core/../img/rolling-load.svg")} height={"20px"} width={"20px"} />
6157
</span>
6258
}
6359

‎src/core/components/object-model.jsx

+17-11
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,8 @@ export default class ObjectModel extends Component {
7979
{
8080
<table className="model"><tbody>
8181
{
82-
!description ? null : <tr style={{ color: "#666", fontWeight: "normal" }}>
83-
<td style={{ fontWeight: "bold" }}>description:</td>
82+
!description ? null : <tr className="description">
83+
<td>description:</td>
8484
<td>
8585
<Markdown source={ description } />
8686
</td>
@@ -91,16 +91,22 @@ export default class ObjectModel extends Component {
9191
([key, value]) => {
9292
let isDeprecated = isOAS3() && value.get("deprecated")
9393
let isRequired = List.isList(requiredProperties) && requiredProperties.contains(key)
94-
let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" }
95-
if ( isRequired ) {
96-
propertyStyle.fontWeight = "bold"
94+
95+
let classNames = ["property-row"]
96+
97+
if (isDeprecated) {
98+
classNames.push("deprecated")
99+
}
100+
101+
if (isRequired) {
102+
classNames.push("required")
97103
}
98104

99-
return (<tr key={key} className={isDeprecated && "deprecated"}>
100-
<td style={ propertyStyle }>
101-
{ key }{ isRequired && <span style={{ color: "red" }}>*</span> }
105+
return (<tr key={key} className={classNames.join(" ")}>
106+
<td>
107+
{ key }{ isRequired && <span className="star">*</span> }
102108
</td>
103-
<td style={{ verticalAlign: "top" }}>
109+
<td>
104110
<Model key={ `object-${name}-${key}_${value}` } { ...otherProps }
105111
required={ isRequired }
106112
getComponent={ getComponent }
@@ -126,11 +132,11 @@ export default class ObjectModel extends Component {
126132

127133
const normalizedValue = !value ? null : value.toJS ? value.toJS() : value
128134

129-
return (<tr key={key} style={{ color: "#777" }}>
135+
return (<tr key={key} className="extension">
130136
<td>
131137
{ key }
132138
</td>
133-
<td style={{ verticalAlign: "top" }}>
139+
<td>
134140
{ JSON.stringify(normalizedValue) }
135141
</td>
136142
</tr>)

‎src/core/components/online-validator-badge.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default class OnlineValidatorBadge extends React.Component {
5353
return null
5454
}
5555

56-
return (<span style={{ float: "right"}}>
56+
return (<span className="float-right">
5757
<a target="_blank" rel="noopener noreferrer" href={`${ sanitizedValidatorUrl }/debug?url=${ encodeURIComponent(this.state.url) }`}>
5858
<ValidatorImage src={`${ sanitizedValidatorUrl }?url=${ encodeURIComponent(this.state.url) }`} alt="Online validator badge"/>
5959
</a>

‎src/core/components/overview.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export class OperationLink extends React.Component {
9797
let { id, method, shown, href } = this.props
9898

9999
return (
100-
<Link href={ href } style={{fontWeight: shown ? "bold" : "normal"}} onClick={this.onClick} className="block opblock-link">
100+
<Link href={ href } onClick={this.onClick} className={`block opblock-link ${shown ? "shown" : ""}`}>
101101
<div>
102102
<small className={`bold-label-${method}`}>{method.toUpperCase()}</small>
103103
<span className="bold-label" >{id}</span>

‎src/core/components/parameter-row.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ export default class ParameterRow extends Component {
262262
<td className="parameters-col_name">
263263
<div className={required ? "parameter__name required" : "parameter__name"}>
264264
{ param.get("name") }
265-
{ !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
265+
{ !required ? null : <span>&nbsp;*</span> }
266266
</div>
267267
<div className="parameter__type">
268268
{ type }

‎src/core/components/primitive-model.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { Component } from "react"
22
import PropTypes from "prop-types"
33
import { getExtensions } from "core/utils"
44

5-
const propStyle = { color: "#6b6b6b", fontStyle: "italic" }
5+
const propClass = "property primitive"
66

77
export default class Primitive extends Component {
88
static propTypes = {
@@ -44,19 +44,19 @@ export default class Primitive extends Component {
4444
<span className="prop-type">{ type }</span>
4545
{ format && <span className="prop-format">(${format})</span>}
4646
{
47-
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
47+
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
4848
}
4949
{
50-
showExtensions && extensions.size ? extensions.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
50+
showExtensions && extensions.size ? extensions.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
5151
}
5252
{
5353
!description ? null :
5454
<Markdown source={ description } />
5555
}
5656
{
57-
xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span>
57+
xml && xml.size ? (<span><br /><span className={ propClass }>xml:</span>
5858
{
59-
xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }><br/>&nbsp;&nbsp;&nbsp;{key}: { String(v) }</span>).toArray()
59+
xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} className={ propClass }><br/>&nbsp;&nbsp;&nbsp;{key}: { String(v) }</span>).toArray()
6060
}
6161
</span>): null
6262
}

‎src/core/components/property.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from "react"
22
import PropTypes from "prop-types"
33

4-
export const Property = ({ propKey, propVal, propStyle }) => {
4+
export const Property = ({ propKey, propVal, propClass }) => {
55
return (
6-
<span style={ propStyle }>
6+
<span className={ propClass }>
77
<br />{ propKey }: { String(propVal) }</span>
88
)
99
}
1010
Property.propTypes = {
1111
propKey: PropTypes.string,
1212
propVal: PropTypes.any,
13-
propStyle: PropTypes.object
13+
propClass: PropTypes.string
1414
}
1515

1616
export default Property

‎src/core/components/response-body.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export default class ResponseBody extends React.PureComponent {
118118
if(contentType.includes("svg")) {
119119
bodyEl = <div> { content } </div>
120120
} else {
121-
bodyEl = <img style={{ maxWidth: "100%" }} src={ window.URL.createObjectURL(content) } />
121+
bodyEl = <img className="full-width" src={ window.URL.createObjectURL(content) } />
122122
}
123123

124124
// Audio

‎src/core/components/svg-assets.jsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
import React from "react"
22
const SvgAssets = () =>
33
<div>
4-
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" style={{
5-
position: "absolute",
6-
width: 0,
7-
height: 0
8-
}}>
4+
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" className="svg-assets">
95
<defs>
106
<symbol viewBox="0 0 20 20" id="unlocked">
117
<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>

‎src/core/containers/filter.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,18 @@ export default class FilterContainer extends React.Component {
2323
const isFailed = specSelectors.loadingStatus() === "failed"
2424
const filter = layoutSelectors.currentFilter()
2525

26-
const inputStyle = {}
27-
if (isFailed) inputStyle.color = "red"
28-
if (isLoading) inputStyle.color = "#aaa"
26+
const classNames = ["operation-filter-input"]
27+
if (isFailed) classNames.push("failed")
28+
if (isLoading) classNames.push("loading")
2929

3030
return (
3131
<div>
3232
{filter === null || filter === false ? null :
3333
<div className="filter-container">
3434
<Col className="filter wrapper" mobile={12}>
35-
<input className="operation-filter-input" placeholder="Filter by tag" type="text"
35+
<input className={classNames.join(" ")} placeholder="Filter by tag" type="text"
3636
onChange={this.onFilterChange} value={filter === true || filter === "true" ? "" : filter}
37-
disabled={isLoading} style={inputStyle}/>
37+
disabled={isLoading}/>
3838
</Col>
3939
</div>
4040
}

‎src/core/plugins/oas3/components/operation-link.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ class OperationLink extends Component {
1212
let parameters = link.get("parameters") && link.get("parameters").toJS()
1313
let description = link.get("description")
1414

15-
return <div style={{ marginBottom: "1.5em" }}>
16-
<div style={{ marginBottom: ".5em" }}>
15+
return <div className="operation-link">
16+
<div className="description">
1717
<b><code>{name}</code></b>
1818
{ description ? <Markdown source={description}></Markdown> : null }
1919
</div>

‎src/core/plugins/oas3/components/request-body.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ const RequestBody = ({
145145
<td className="parameters-col_name">
146146
<div className={required ? "parameter__name required" : "parameter__name"}>
147147
{ key }
148-
{ !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
148+
{ !required ? null : <span>&nbsp;*</span> }
149149
</div>
150150
<div className="parameter__type">
151151
{ type }

‎src/core/plugins/oas3/wrap-components/version-stamp.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default OAS3ComponentWrapFactory((props) => {
66

77
return <span>
88
<Ori {...props} />
9-
<small style={{ backgroundColor: "#89bf04" }}>
9+
<small className="version-stamp">
1010
<pre className="version">OAS3</pre>
1111
</small>
1212
</span>

‎src/core/plugins/view/root-injects.jsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,9 @@ const createClass = component => class extends Component {
7676
}
7777
}
7878

79-
const Fallback = ({ name }) => <div style={{ // eslint-disable-line react/prop-types
80-
padding: "1em",
81-
"color": "#aaa"
82-
}}>😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i></div>
79+
const Fallback = ({
80+
name // eslint-disable-line react/prop-types
81+
}) => <div className="fallback">😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i></div>
8382

8483
const wrapRender = (component) => {
8584
const isStateless = component => !(component.prototype && component.prototype.isReactComponent)

‎src/core/utils.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -307,15 +307,15 @@ export function highlight (el) {
307307
// (some types are highlighted similarly)
308308
el[appendChild](
309309
node = _document.createElement("span")
310-
).setAttribute("style", [
310+
).setAttribute("class", [
311311
// 0: not formatted
312-
"color: #555; font-weight: bold;",
312+
"token-not-formatted",
313313
// 1: keywords
314314
"",
315315
// 2: punctuation
316316
"",
317317
// 3: strings and regexps
318-
"color: #555;",
318+
"token-string",
319319
// 4: comments
320320
""
321321
][

‎src/plugins/topbar/topbar.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -104,10 +104,10 @@ export default class Topbar extends React.Component {
104104
let isLoading = specSelectors.loadingStatus() === "loading"
105105
let isFailed = specSelectors.loadingStatus() === "failed"
106106

107-
let inputStyle = {}
108-
if(isFailed) inputStyle.color = "red"
109-
if(isLoading) inputStyle.color = "#aaa"
110-
107+
const classNames = ["download-url-input"]
108+
if (isFailed) classNames.push("failed")
109+
if (isLoading) classNames.push("loading")
110+
111111
const { urls } = getConfigs()
112112
let control = []
113113
let formOnSubmit = null
@@ -128,7 +128,7 @@ export default class Topbar extends React.Component {
128128
}
129129
else {
130130
formOnSubmit = this.downloadUrl
131-
control.push(<input className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />)
131+
control.push(<input className={classNames.join(" ")} type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} />)
132132
control.push(<Button className="download-url-button" onClick={ this.downloadUrl }>Explore</Button>)
133133
}
134134

‎src/style/_authorize.scss

+12
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,19 @@
6565

6666
border-radius: 4px;
6767

68+
background-color: #ffeeee;
69+
70+
color: red;
71+
72+
margin: 1em;
73+
6874
@include text_code();
75+
76+
b
77+
{
78+
text-transform: capitalize;
79+
margin-right: 1em;
80+
}
6981
}
7082
}
7183

‎src/style/_errors.scss

+16
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,22 @@
2929
{
3030
color: $errors-wrapper-errors-small-font-color;
3131
}
32+
33+
.message
34+
{
35+
white-space: pre-line;
36+
37+
&.thrown
38+
{
39+
max-width: 100%;
40+
}
41+
}
42+
43+
.error-line
44+
{
45+
text-decoration: underline;
46+
cursor: pointer;
47+
}
3248
}
3349

3450
hgroup

‎src/style/_information.scss

+13
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22
{
33
margin: 50px 0;
44

5+
&.failed-config
6+
{
7+
max-width: 880px;
8+
margin-left: auto;
9+
margin-right: auto;
10+
text-align: center
11+
}
12+
513
hgroup.main
614
{
715
margin: 0 0 20px 0;
@@ -78,6 +86,11 @@
7886

7987
border-radius: 57px;
8088
background: $info-title-small-background-color;
89+
90+
&.version-stamp
91+
{
92+
background-color: #89bf04;
93+
}
8194

8295
pre
8396
{

‎src/style/_layout.scss

+87
Original file line numberDiff line numberDiff line change
@@ -419,6 +419,19 @@
419419
}
420420
}
421421

422+
.filter, .download-url-wrapper
423+
{
424+
.failed
425+
{
426+
color: red;
427+
}
428+
429+
.loading
430+
{
431+
color: #aaa;
432+
}
433+
}
434+
422435
.model-example {
423436
margin-top: 1em;
424437
}
@@ -553,6 +566,11 @@
553566

554567
@include text_body();
555568
}
569+
570+
.curl
571+
{
572+
white-space: normal;
573+
}
556574
}
557575

558576
.response-col_status
@@ -583,6 +601,16 @@
583601

584602
@include text_code($response-col-links-font-color);
585603
}
604+
605+
.operation-link
606+
{
607+
margin-bottom: 1.5em;
608+
609+
.description
610+
{
611+
margin-bottom: 0.5em;
612+
}
613+
}
586614
}
587615

588616
.opblock-body
@@ -793,6 +821,35 @@
793821
}
794822
}
795823

824+
.hidden
825+
{
826+
display: none;
827+
}
828+
829+
.no-margin
830+
{
831+
height: auto;
832+
border: none;
833+
margin: 0;
834+
padding: 0;
835+
}
836+
837+
.float-right
838+
{
839+
float: right;
840+
}
841+
842+
img.full-width
843+
{
844+
width: 100%;
845+
}
846+
847+
.svg-assets
848+
{
849+
position: absolute;
850+
width: 0;
851+
height: 0;
852+
}
796853

797854
section
798855
{
@@ -815,6 +872,12 @@ a.nostyle {
815872
}
816873
}
817874

875+
.fallback
876+
{
877+
padding: 1em;
878+
color: #aaa;
879+
}
880+
818881
.version-pragma {
819882
height: 100%;
820883
padding: 5em 0px;
@@ -841,3 +904,27 @@ a.nostyle {
841904
}
842905
}
843906
}
907+
908+
.opblock-link
909+
{
910+
font-weight: normal;
911+
912+
&.shown
913+
{
914+
font-weight: bold;
915+
}
916+
}
917+
918+
span
919+
{
920+
&.token-string
921+
{
922+
color: #555;
923+
}
924+
925+
&.token-not-formatted
926+
{
927+
color: #555;
928+
font-weight: bold;
929+
}
930+
}

‎src/style/_models.scss

+72
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,68 @@
9797
{
9898
margin: 0 0 1em 0;
9999
}
100+
101+
.property
102+
{
103+
color: #999;
104+
font-style: italic;
105+
106+
&.primitive
107+
{
108+
color: #6b6b6b;
109+
}
110+
}
100111
}
101112

113+
table.model
114+
{
115+
tr
116+
{
117+
&.description
118+
{
119+
color: #666;
120+
font-weight: normal;
121+
122+
td:first-child
123+
{
124+
font-weight: bold;
125+
}
126+
}
127+
128+
&.property-row
129+
{
130+
&.required td:first-child
131+
{
132+
font-weight: bold;
133+
}
134+
135+
td
136+
{
137+
vertical-align: top;
138+
139+
&:first-child
140+
{
141+
padding-right: 0.2em;
142+
}
143+
}
144+
145+
.star
146+
{
147+
color: red;
148+
}
149+
}
150+
151+
&.extension
152+
{
153+
color: #777;
154+
155+
td:last-child
156+
{
157+
vertical-align: top;
158+
}
159+
}
160+
}
161+
}
102162

103163
section.models
104164
{
@@ -107,6 +167,11 @@ section.models
107167
border: 1px solid rgba($section-models-border-color, .3);
108168
border-radius: 4px;
109169

170+
.pointer
171+
{
172+
cursor: pointer;
173+
}
174+
110175
&.is-open
111176
{
112177
padding: 0 0 20px;
@@ -229,6 +294,13 @@ section.models
229294
font-size: 16px;
230295

231296
@include text_headline($section-models-model-title-font-color);
297+
298+
img
299+
{
300+
margin-left: 1em;
301+
position: relative;
302+
bottom: 0px;
303+
}
232304
}
233305

234306
.model-deprecated-warning

‎src/style/_table.scss

+11
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,12 @@ table
3838

3939
@include text_code();
4040
}
41+
42+
.header-example
43+
{
44+
color: #999;
45+
font-style: italic;
46+
}
4147
}
4248

4349
tbody
@@ -112,6 +118,11 @@ table
112118
{
113119
font-weight: bold;
114120

121+
span
122+
{
123+
color: red;
124+
}
125+
115126
&:after
116127
{
117128
font-size: 10px;

0 commit comments

Comments
 (0)
Please sign in to comment.