From f3f83084bba4c6e9a2874cfec2209aa086613f4a Mon Sep 17 00:00:00 2001 From: bullman Date: Sun, 27 Jan 2019 21:29:26 -0800 Subject: [PATCH] set viewport to 100%; clean up docs styles a bit --- src/_playground/App.js | 2 +- src/_playground/App.scss | 188 +++++++++--------- src/_playground/Routes.js | 44 ++-- .../documentation/Description/Description.js | 2 +- .../documentation/DocsTile/DocsTile.js | 9 +- .../documentation/Header/Header.js | 6 +- 6 files changed, 117 insertions(+), 134 deletions(-) diff --git a/src/_playground/App.js b/src/_playground/App.js index 0e66834fe..f1d4844d5 100644 --- a/src/_playground/App.js +++ b/src/_playground/App.js @@ -6,7 +6,7 @@ import React, { Component } from 'react'; class App extends Component { render() { return ( -
+
); diff --git a/src/_playground/App.scss b/src/_playground/App.scss index bffbedd4a..f973e9b94 100644 --- a/src/_playground/App.scss +++ b/src/_playground/App.scss @@ -2,10 +2,101 @@ $fd-icons-path: '../../node_modules/fiori-fundamentals/scss/icons/'; $fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/'; @import '../../node_modules/fiori-fundamentals/scss/all.scss'; -.App { +// Fundamental React Docs Styles +.frDocs-App { background-color: white; + + .frDocs-Container { + display: flex; + justify-content: space-between; + height: 100vh; + overflow: hidden; + margin-left: auto; + margin-right: auto; + width: 100%; + + .frDocs-Sidebar { + color: #21262c; + min-width: 16rem; + background-color: #f1f3f6; + + .frDocs-Logo { + font-size: 1.25rem; + margin-bottom: 0; + display: flex; + justify-content: center; + > a { + color: inherit; + } + } + + .frDocs-Nav { + list-style: none; + border-top: 2px solid #dbe7f3; + height: 90%; + overflow: auto; + + .frDocs-Nav__headers { + color: #424e5a; + padding: 15px 20px; + display: block; + } + + .frDocs-Nav__item { + display: block; + color: #21262c; + font-size: 0.875rem; + position: relative; + padding: 13px 40px; + } + + .frDocs-Nav__item--selected { + border-left: 6px solid #2fd0c8; + } + + .frDocs-Nav__item:hover, + .frDocs-Nav__item--active { + color: #424e5a; + border-left: 6px solid #2fd0c8; + padding-left: 34px; + } + } + } + + .frDocs-Content { + flex-grow: 1; + overflow-y: scroll; + padding-bottom: 2rem; + background-color: white; + margin-right: auto; + margin-left: auto; + padding-left: 1rem; + padding-right: 1rem; + + .frDocs-Content__header { + margin: 12px 0; + margin-top: 2rem; + font-size: 2.2rem; + } + + .frDocs-Content__description { + margin-bottom: 1.5rem; + font-size: 1rem; + font-weight: 300; + } + + .frDocs-Content__tile { + border-radius: 4px 4px 0 0; + border: 1px solid #ccc; + border-bottom: none; + padding: 10px 0; + background-color: '#f3f4f5' + } + } + } } +// Fundamental React Component Overrides .fd-counter--notification { position: relative; } @@ -42,104 +133,15 @@ $fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/'; padding-bottom: 10px; } -.docs-component { - margin-bottom: -28px; - border-radius: 4px; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - padding-bottom: 8px; - border: 1px solid #ccc; -} - .fd-side-nav.fd-side-nav--icons { max-width: 65px; } -.container { - display: flex; - justify-content: space-between; - height: 100vh; - overflow: hidden; - width: 90%; - margin-left: auto; - margin-right: auto; -} - -.logo { - font-size: 1.25rem; - margin-bottom: 0; - display: flex; - justify-content: center; - > a { - color: inherit; - } -} - -.logo-subtitle { - font-size: 0.75rem; -} - -.sidebar { - color: #21262c; - min-width: 16rem; - background-color: #f1f3f6; -} - -.nav { - list-style: none; - border-top: 2px solid #dbe7f3; - height: 90%; - overflow: auto; -} - -.nav-item { - display: block; - color: #21262c; - font-size: 0.875rem; - position: relative; - padding: 13px 40px; -} - -.side-nav__headers { - color: #424e5a; - padding: 15px 20px; - display: block; -} - -.nav-item--selected { - border-left: 6px solid #2fd0c8; -} - -.nav-item:hover, -.nav-item--active { - color: #424e5a; - border-left: 6px solid #2fd0c8; - padding-left: 34px; -} - -.content { - flex-grow: 1; - overflow-y: scroll; - padding-bottom: 2rem; - background-color: white; -} - -.content-margin { - margin-right: auto; - margin-left: auto; - padding-left: 1rem; - padding-right: 1rem; -} - .property-header { text-align: left; padding-right: 15px; } -.header { - margin: 12px 0; -} - .fd-side-nav { max-width: 250px; } @@ -251,9 +253,3 @@ $fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/'; } } } - -.description { - margin-bottom: 1.5rem; - font-size: 1rem; - font-weight: 300; -} diff --git a/src/_playground/Routes.js b/src/_playground/Routes.js index d38a6731b..9daa7d47c 100644 --- a/src/_playground/Routes.js +++ b/src/_playground/Routes.js @@ -151,16 +151,16 @@ export default class Routes extends Component { render() { return ( -
-
-

FUNDAMENTAL REACT

-
    -
  • Components
    • +
    +
    +

    FUNDAMENTAL REACT

    +
      +
    • Components
      • {this.state.routes.map(route => { return ( {route.name} @@ -169,22 +169,20 @@ export default class Routes extends Component { })}
    -
    -
    - - {this.state.routes.map(route => { - return ( - - ); - })} - - -
    +
    + + {this.state.routes.map(route => { + return ( + + ); + })} + +
    diff --git a/src/_playground/documentation/Description/Description.js b/src/_playground/documentation/Description/Description.js index 2f7f8383b..73bafb6a4 100644 --- a/src/_playground/documentation/Description/Description.js +++ b/src/_playground/documentation/Description/Description.js @@ -4,7 +4,7 @@ import ReactMarkdown from 'react-markdown'; export const Description = ({ children }) => ( ); diff --git a/src/_playground/documentation/DocsTile/DocsTile.js b/src/_playground/documentation/DocsTile/DocsTile.js index 4176a61ff..fc8ae151a 100644 --- a/src/_playground/documentation/DocsTile/DocsTile.js +++ b/src/_playground/documentation/DocsTile/DocsTile.js @@ -5,13 +5,6 @@ import SyntaxHighlighter from 'react-syntax-highlighter'; import React, { Component } from 'react'; export const DocsTile = props => { - const docsTileStyle = { - borderRadius: '4px 4px 0 0', - border: '1px solid #ccc', - borderBottom: 'none', - padding: '10px 0', - backgroundColor: '#f3f4f5' - }; const centerStyle = { textAlign: 'center' }; @@ -19,7 +12,7 @@ export const DocsTile = props => { const {centered, children} = props; return ( -
    +
    {centered ? (
    diff --git a/src/_playground/documentation/Header/Header.js b/src/_playground/documentation/Header/Header.js index fe7da1a19..2aff22043 100644 --- a/src/_playground/documentation/Header/Header.js +++ b/src/_playground/documentation/Header/Header.js @@ -2,14 +2,10 @@ import PropTypes from 'prop-types'; import React from 'react'; export const Header = (props) => { - const headerStyle = { - marginTop: '2rem', - fontSize: '2.2rem' - }; const { children } = props; return ( -

    +

    {children}

    );