Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-09-12 01:23:52 +00:00
Code Issues Releases Activity

split scss into separate files

Browse Source
This commit is contained in:
David Lechner
2021-01-14 16:35:23 -06:00
parent 25c0d104a9
commit 2f57ae2f57
12 changed files with 115 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/App.tsx
+1
View File
@@ -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);
src/components/Editor.tsx
+1
View File
@@ -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;
src/components/StatusBar.tsx
+2
View File
@@ -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;
src/components/Toolbar.tsx
+2
View File
@@ -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 (
src/components/app.scss
+24
View File
@@ -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;
}
src/components/editor.scss
+28
View File
@@ -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
}
src/beta.svg → src/components/images/beta.svg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

src/components/settings.scss
+2
View File
@@ -1,6 +1,8 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2021 The Pybricks Authors
// Custom styling for the Settings* controls.
.pb-settings {
margin: 25px;
}
src/components/status-bar.scss
+26
View File
@@ -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;
}
src/components/toolbar.scss
+9
View File
@@ -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;
}
src/index.scss
+2 -87
View File
@@ -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
}
src/variables.scss
+18
View File
@@ -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;