From 2f57ae2f573a4986a801d160dc8e5c1bfa17a5df Mon Sep 17 00:00:00 2001 From: David Lechner Date: Thu, 14 Jan 2021 16:35:23 -0600 Subject: [PATCH] split scss into separate files --- src/components/App.tsx | 1 + src/components/Editor.tsx | 1 + src/components/StatusBar.tsx | 2 + src/components/Toolbar.tsx | 2 + src/components/app.scss | 24 ++++++++ src/components/editor.scss | 28 +++++++++ src/{ => components/images}/beta.svg | 0 src/components/settings.scss | 2 + src/components/status-bar.scss | 26 ++++++++ src/components/toolbar.scss | 9 +++ src/index.scss | 89 +--------------------------- src/variables.scss | 18 ++++++ 12 files changed, 115 insertions(+), 87 deletions(-) create mode 100644 src/components/app.scss create mode 100644 src/components/editor.scss rename src/{ => components/images}/beta.svg (100%) create mode 100644 src/components/status-bar.scss create mode 100644 src/components/toolbar.scss create mode 100644 src/variables.scss diff --git a/src/components/App.tsx b/src/components/App.tsx index 61d7417d..04a15162 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -12,6 +12,7 @@ import Terminal from './Terminal'; import Toolbar from './Toolbar'; import 'react-splitter-layout/lib/index.css'; +import './app.scss'; function App(): JSX.Element { const showDocs = useSelector((s: RootState): boolean => s.settings.showDocs); diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx index 80fde2cd..75449edf 100644 --- a/src/components/Editor.tsx +++ b/src/components/Editor.tsx @@ -29,6 +29,7 @@ import 'ace-builds/src-noconflict/ext-keybinding_menu'; import 'ace-builds/src-noconflict/ext-language_tools'; import './editor-snippets'; +import './editor.scss'; type StateProps = { darkMode: boolean; diff --git a/src/components/StatusBar.tsx b/src/components/StatusBar.tsx index d137dfd6..aa330b5a 100644 --- a/src/components/StatusBar.tsx +++ b/src/components/StatusBar.tsx @@ -6,6 +6,8 @@ import React from 'react'; import { connect } from 'react-redux'; import { RootState } from '../reducers'; +import './status-bar.scss'; + type StateProps = { progress: number }; type StatusProps = StateProps; diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx index b8ed8c90..5107bd8d 100644 --- a/src/components/Toolbar.tsx +++ b/src/components/Toolbar.tsx @@ -12,6 +12,8 @@ import SaveAsButton from './SaveAsButton'; import SettingsButton from './SettingsButton'; import StopButton from './StopButton'; +import './toolbar.scss'; + class Toolbar extends React.Component { render(): JSX.Element { return ( diff --git a/src/components/app.scss b/src/components/app.scss new file mode 100644 index 00000000..626932eb --- /dev/null +++ b/src/components/app.scss @@ -0,0 +1,24 @@ +// SPDX-License-Identifier: MIT +// Copyright (c) 2020-2021 The Pybricks Authors + +// Custom styling for the App control. + +@import '../variables.scss'; + +.bp3-dark .splitter-layout > .layout-splitter { + // make layout splitter match app color scheme + background-color: $pt-dark-app-background-color; +} + +.splitter-layout > .layout-splitter { + // make layout splitter match app color scheme + background-color: $pt-app-background-color; +} + +.bp3-dark .terminal-padding { + background-color: black; +} + +.terminal-padding { + padding-left: 10px; +} diff --git a/src/components/editor.scss b/src/components/editor.scss new file mode 100644 index 00000000..71697224 --- /dev/null +++ b/src/components/editor.scss @@ -0,0 +1,28 @@ +// SPDX-License-Identifier: MIT +// Copyright (c) 2020-2021 The Pybricks Authors + +// Custom styling for the Editor control. + +@import '../variables.scss'; + +.bp3-dark .ace_gutter { + // make ace editor match app backgound color + background-color: $pt-dark-app-background-color; +} + +.ace_gutter { + // make ace editor match app backgound color + background-color: $pt-app-background-color; +} + +.watermark::after { + content: ""; + background: url("./images/beta.svg"); + opacity: 1; + top: 0; + left: 0; + bottom: 0; + right: 0; + position: absolute; + pointer-events: none +} diff --git a/src/beta.svg b/src/components/images/beta.svg similarity index 100% rename from src/beta.svg rename to src/components/images/beta.svg diff --git a/src/components/settings.scss b/src/components/settings.scss index 480c0325..db0e0752 100644 --- a/src/components/settings.scss +++ b/src/components/settings.scss @@ -1,6 +1,8 @@ // SPDX-License-Identifier: MIT // Copyright (c) 2021 The Pybricks Authors +// Custom styling for the Settings* controls. + .pb-settings { margin: 25px; } diff --git a/src/components/status-bar.scss b/src/components/status-bar.scss new file mode 100644 index 00000000..60448c17 --- /dev/null +++ b/src/components/status-bar.scss @@ -0,0 +1,26 @@ +// SPDX-License-Identifier: MIT +// Copyright (c) 2020-2021 The Pybricks Authors + +// Custom styling for the StatusBar control. + +@import '../variables.scss'; + +.status-bar { + position: fixed; + top: calc(100vh - #{$pb-status-bar-height} - var(--mobile-pad)); + background-color: $pb-pybricks-blue; + height: $pb-status-bar-height; + width: 100vw; + display: flex; + align-items: center; +} + +.status-bar-item { + width: 25%; + margin-left: 10px; +} + +.bp3-progress-bar.status-bar-item { + // override progress bar default gray1 backgound + background-color: $pt-app-background-color; +} diff --git a/src/components/toolbar.scss b/src/components/toolbar.scss new file mode 100644 index 00000000..efe477c7 --- /dev/null +++ b/src/components/toolbar.scss @@ -0,0 +1,9 @@ +// SPDX-License-Identifier: MIT +// Copyright (c) 2020-2021 The Pybricks Authors + +// Custom styling for the Toolbar control. + +.bp3-navbar-divider { + // don't draw vertical line since we are just using button groups + border-left: unset; +} diff --git a/src/index.scss b/src/index.scss index c7a9e7e4..b1bab40c 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,26 +1,10 @@ // SPDX-License-Identifier: MIT // Copyright (c) 2020-2021 The Pybricks Authors -@import '@blueprintjs/core/lib/scss/variables.scss'; - -// override variables here -// See https://blueprintjs.com/docs/#core/variables - -$pt-navbar-height: 72px; - -$pybricks-blue: #0088ce; -$pt-app-background-color: #e8e8e8; -$pt-intent-primary: $pybricks-blue; -$pt-outline-color: rgba($pybricks-blue, 0.6); - -$navbar-background-color: $pt-app-background-color; -$dark-navbar-background-color: $pt-dark-app-background-color; - +@import './variables.scss'; @import '~normalize.css'; @import '@blueprintjs/core/src/blueprint.scss'; -$status-bar-height: 3vh; - :root { --mobile-pad: 0px; } @@ -34,7 +18,7 @@ body { .h-body { // height makes everything fit without scrolling - height: calc(100vh - #{$pt-navbar-height} - #{$status-bar-height} - var(--mobile-pad)) !important; + height: calc(100vh - #{$pt-navbar-height} - #{$pb-status-bar-height} - var(--mobile-pad)) !important; } .h-100 { @@ -52,72 +36,3 @@ body { .no-box-shadow { box-shadow: unset !important; } - -// Status bar. TODO: move this to separate file - -.status-bar { - position: fixed; - top: calc(100vh - #{$status-bar-height} - var(--mobile-pad)); - background-color: $pybricks-blue; - height: $status-bar-height; - width: 100vw; - display: flex; - align-items: center; -} - -.status-bar-item { - width: 25%; - margin-left: 10px; -} - -.bp3-progress-bar.status-bar-item { - // override progress bar default gray1 backgound - background-color: $pt-app-background-color; -} - -// Hacks - -.bp3-navbar-divider { - // don't draw vertical line since we are just using button groups - border-left: unset; -} - -.bp3-dark .ace_gutter { - // make ace editor match app backgound color - background-color: $pt-dark-app-background-color !important; -} - -.ace_gutter { - // make ace editor match app backgound color - background-color: $pt-app-background-color !important; -} - -.bp3-dark .splitter-layout > .layout-splitter { - // make layout splitter match app color scheme - background-color: $pt-dark-app-background-color !important; -} - -.layout-splitter { - // make layout splitter match app color scheme - background-color: $pt-app-background-color !important; -} - -.bp3-dark .terminal-padding { - background-color: black; -} - -.terminal-padding { - padding-left: 10px; -} - -.watermark::after { - content: ""; - background: url("./beta.svg"); - opacity: 1; - top: 0; - left: 0; - bottom: 0; - right: 0; - position: absolute; - pointer-events: none -} diff --git a/src/variables.scss b/src/variables.scss new file mode 100644 index 00000000..3005c042 --- /dev/null +++ b/src/variables.scss @@ -0,0 +1,18 @@ +// SPDX-License-Identifier: MIT +// Copyright (c) 2020-2021 The Pybricks Authors + +@import '@blueprintjs/core/lib/scss/variables.scss'; + +// override variables here +// See https://blueprintjs.com/docs/#core/variables + +$pt-navbar-height: 72px; +$pb-status-bar-height: 3vh; + +$pb-pybricks-blue: #0088ce; +$pt-app-background-color: #e8e8e8; +$pt-intent-primary: $pb-pybricks-blue; +$pt-outline-color: rgba($pb-pybricks-blue, 0.6); + +$navbar-background-color: $pt-app-background-color; +$dark-navbar-background-color: $pt-dark-app-background-color;