[DM] rename .kss-* → .docs-*

packages/core/examples/common/baseExample.tsx

@@ -25,7 +25,7 @@ export default class BaseExample<S> extends React.Component<IBaseExampleProps, S
 
     public render() {
         return (
-            <div className={classNames("kss-example", this.className)} data-example-id={this.props.id}>
+            <div className={classNames("docs-example", this.className)} data-example-id={this.props.id}>
                 <div className="docs-react-example">{this.renderExample()}</div>
                 <div className="docs-react-options">{this.actuallyRenderOptions()}</div>
             </div>

packages/docs/src/common/cssExample.tsx

@@ -11,11 +11,11 @@ const DEFAULT_MODIFIER: IKssModifier = {
 export const CssExample: React.SFC<IKssExample> = ({ markup, markupHtml, modifiers, reference }) => (
     <div>
         {modifiers.length > 0 ? <ModifierTable modifiers={modifiers} /> : undefined}
-        <div className="kss-example-wrapper" data-reference={reference}>
+        <div className="docs-example-wrapper" data-reference={reference}>
             {renderMarkupForModifier(markup, DEFAULT_MODIFIER)}
             {modifiers.map((mod) => renderMarkupForModifier(markup, mod))}
         </div>
-        <div className="kss-markup" dangerouslySetInnerHTML={{ __html: markupHtml }} />
+        <div className="docs-markup" dangerouslySetInnerHTML={{ __html: markupHtml }} />
     </div>
 );
 
@@ -31,7 +31,7 @@ function renderMarkupForModifier(markup: string, modifier: IKssModifier) {
         }
     });
     return (
-        <div className="kss-example" data-modifier={modifier.name} key={modifier.name}>
+        <div className="docs-example" data-modifier={modifier.name} key={modifier.name}>
             <code>{modifier.name}</code>
             <div dangerouslySetInnerHTML={{ __html: html }} />
         </div>

packages/docs/src/common/resolveExample.tsx

@@ -54,7 +54,7 @@ export interface IExampleProps {
 }
 
 const Example: React.SFC<IExampleProps> = (props) => (
-    <div className="kss-example-wrapper">
+    <div className="docs-example-wrapper">
         {React.createElement(props.component, { getTheme, id: props.name })}
         <a className="view-example-source" href={props.sourceUrl} target="_blank">
             <span className="pt-icon-standard pt-icon-code">&nbsp;</span>View source on GitHub

packages/docs/src/components/modifierTable.tsx

@@ -19,7 +19,7 @@ function renderModifier(modifier: IKssModifier, index: number) {
 }
 
 export const ModifierTable: React.SFC<{ modifiers: IKssModifier[] }> = ({ modifiers }) => (
-    <div className="kss-modifiers">
+    <div className="docs-modifiers">
         <table className="pt-table">
             <thead>
                 <tr>

packages/docs/src/components/propsTable.tsx

@@ -75,7 +75,7 @@ const renderPropRow = (prop: IInheritedPropertyEntry) => {
 };
 
 export const PropsTable: React.SFC<{ name: string, props: IInheritedPropertyEntry[] }> = ({ name, props }) => (
-    <div className="kss-modifiers">
+    <div className="docs-modifiers">
         <div className="docs-interface-name">{name}</div>
         <table className="pt-table">
             <thead>

packages/docs/src/components/styleguide.tsx

@@ -247,7 +247,7 @@ function queryHTMLElement(parent: Element, selector: string) {
  * Returns the reference of the closest section within `offset` pixels of the top of the viewport.
  */
 function getScrolledReference(offset: number, container: HTMLElement, scrollParent = document.body) {
-    const headings = container.queryAll(".kss-title");
+    const headings = container.queryAll(".docs-title");
     while (headings.length > 0) {
         // iterating in reverse order (popping from end / bottom of page)
         // so the first element below the threshold is the one we want.

packages/docs/src/index.html

@@ -9,7 +9,6 @@
   <title>Blueprint – Documentation</title>
 
   <meta name="description" content="">
-  <meta name="generator" content="kss-node">
 
   <link rel="stylesheet" href="docs.css">
   <link rel="icon" href="assets/favicon.png" sizes="32x32" type="image/png" />
@@ -25,7 +24,7 @@
   }
   </script>
 </head>
-<body id="kss-node">
+<body>
     <div id="blueprint-documentation"></div>
 
     <script src="docs.js"></script>

packages/docs/src/index.tsx

@@ -57,7 +57,7 @@ function resolveInterface(name: string, key: React.Key) {
 const Heading: React.SFC<{ depth: number, header: string, reference: string }> =
     ({ depth, header, reference }) => (
         // use createElement so we can dynamically choose tag based on depth
-        React.createElement(`h${depth}`, { className: "kss-title" },
+        React.createElement(`h${depth}`, { className: "docs-title" },
             <a className="docs-anchor" key="anchor" name={reference} />,
             <a className="docs-anchor-link" href={"#" + reference} key="link">
                 <span className="pt-icon-standard pt-icon-link" />

packages/docs/src/styles/_content.scss

@@ -17,7 +17,7 @@ $example-background-color: $content-background-color;
 $dark-example-background-color: $dark-content-background-color;
 
 // title of a section
-.kss-title {
+.docs-title {
   position: relative;
   margin: $heading-margin 0 ($heading-margin / 2);
 
@@ -50,7 +50,7 @@ $dark-example-background-color: $dark-content-background-color;
   }
 
   &:focus,
-  .kss-title:hover & {
+  .docs-title:hover & {
     opacity: 1;
   }
 }
@@ -61,7 +61,7 @@ $dark-example-background-color: $dark-content-background-color;
 }
 
 // modifiers table
-.kss-modifiers {
+.docs-modifiers {
   margin-top: $heading-margin;
   margin-bottom: $heading-margin / 2;
 
@@ -80,7 +80,7 @@ $dark-example-background-color: $dark-content-background-color;
 }
 
 // full-bleed wrapper for example
-.kss-example-wrapper {
+.docs-example-wrapper {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -98,16 +98,8 @@ $dark-example-background-color: $dark-content-background-color;
   }
 }
 
-.kss-markup {
-  width: 100%;
-
-  > pre {
-    margin: 0;
-  }
-}
-
 // example itself inside the wrapper
-.kss-example {
+.docs-example {
   display: inline-block;
   flex-basis: 100%;
 
@@ -126,8 +118,8 @@ $dark-example-background-color: $dark-content-background-color;
 }
 
 // modifier labels
-.kss-modifiers code,
-.kss-example > code {
+.docs-modifiers code,
+.docs-example > code {
   display: inline-block;
   line-height: 1.4;
   white-space: nowrap;
@@ -150,6 +142,10 @@ $dark-example-background-color: $dark-content-background-color;
   color: $class-modifier-color;
 }
 
+.docs-markup .editor {
+  margin: 0;
+}
+
 // additions to the syntax theme
 .editor {
   overflow: auto;

packages/docs/src/styles/_examples.scss

@@ -117,6 +117,7 @@ $options-margin: $pt-grid-size * 3;
 }
 
 .docs-overlay-example-transition {
+  $overlay-example-width: $pt-grid-size * 40;
   $enter: (
     transform: (translateY(-50vh) rotate(-10deg), translateY(0) rotate(0deg))
   );
@@ -139,9 +140,6 @@ $options-margin: $pt-grid-size * 3;
     $pt-transition-duration * 5,
     $before: "&"
   );
-
-  $overlay-example-width: $pt-grid-size * 40;
-
   top: $overlay-example-width / 2;
   left: calc(50% - #{$overlay-example-width / 2});
   z-index: $pt-z-index-overlay + 1;
@@ -214,7 +212,7 @@ $options-margin: $pt-grid-size * 3;
   line-height: $pt-navbar-height;
 }
 
-.kss-example-wrapper .pt-navbar {
+.docs-example-wrapper .pt-navbar {
   position: static;
 }
 

packages/docs/src/styles/_sections.scss

@@ -26,7 +26,7 @@
 // `.pt-fill` modifiers will always occupy an entire row.
 // (Default styles give flex-basis of 100% to each example.)
 @mixin examples-per-row($amount) {
-  .kss-example {
+  .docs-example {
     flex-basis: floor(100% / $amount);
     padding-right: $pt-grid-size * 2;
 
@@ -62,7 +62,7 @@
 #{reference("pt-checkbox")},
 #{reference("pt-radio")},
 #{reference("pt-switch")} {
-  .kss-example {
+  .docs-example {
     flex-basis: 10%;
   }
 }
@@ -105,22 +105,22 @@
 #{reference("pt-select")} {
   @include examples-per-row(4);
 
-  .kss-example {
+  .docs-example {
     padding-right: 0;
   }
 }
 
 #{reference("pt-select.pt-inline")} {
   justify-content: initial;
 
-  .kss-example {
+  .docs-example {
     flex-basis: $pt-grid-size * 25;
     margin-right: $options-margin;
   }
 }
 
 #{reference("pt-dialog")} {
-  .kss-example {
+  .docs-example {
     height: $pt-grid-size * 27;
   }
 
@@ -135,7 +135,7 @@
 #{reference("pt-menu.pt-menu-header")} {
   justify-content: initial;
 
-  .kss-example {
+  .docs-example {
     flex-basis: $pt-grid-size * 15;
     margin-right: $pt-grid-size * 8;
     padding-right: 0;