From f00096cea4613c13672ba5dbc0bd60c461c92603 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 16 Nov 2023 14:57:29 -0500 Subject: fixed alt-drag to toggle scroll mode. fixed replaceTab to work properly with panelNames. made slides pointing to trails open the target trails in situ. cleaned up code when starting drag to call freeformview more nicel. fixed brush/highlight of tabs. made collectionFreeformView/FreeformDocs use a more robust and simpler approach to caching freeform values. --- src/client/views/collections/TabDocView.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'src/client/views/collections/TabDocView.scss') diff --git a/src/client/views/collections/TabDocView.scss b/src/client/views/collections/TabDocView.scss index 13bb3a577..d447991a1 100644 --- a/src/client/views/collections/TabDocView.scss +++ b/src/client/views/collections/TabDocView.scss @@ -15,7 +15,6 @@ input.lm_title { } input.lm_title { - transition-delay: 0.35s; width: max-content; cursor: pointer; } -- cgit v1.2.3-70-g09d2 From 07c30aed69dfa810ddb0b861ae2dc8e8f3a27356 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 11 Dec 2023 17:04:49 -0500 Subject: fixed includes of scss globals into typescript files. --- package-lock.json | 3 +- package.json | 2 +- src/client/documents/Documents.ts | 5 +- src/client/util/CaptureManager.scss | 7 +- src/client/util/DragManager.ts | 3 +- src/client/util/SettingsManager.scss | 4 +- src/client/util/reportManager/ReportManager.scss | 7 +- src/client/views/AntimodeMenu.scss | 11 +-- src/client/views/ContextMenu.scss | 2 +- src/client/views/DashboardView.scss | 52 +++++------ src/client/views/DocumentButtonBar.scss | 2 +- src/client/views/DocumentDecorations.scss | 2 +- src/client/views/InkingStroke.tsx | 4 +- src/client/views/Main.scss | 2 +- src/client/views/MainView.scss | 2 +- src/client/views/MainView.tsx | 4 +- src/client/views/PropertiesButtons.scss | 45 +++++---- src/client/views/PropertiesSection.scss | 7 +- src/client/views/PropertiesView.scss | 2 +- src/client/views/TemplateMenu.scss | 7 +- src/client/views/_nodeModuleOverrides.scss | 2 +- src/client/views/animationtimeline/Region.scss | 2 +- src/client/views/animationtimeline/Region.tsx | 2 +- src/client/views/animationtimeline/Timeline.scss | 18 +--- .../views/animationtimeline/TimelineMenu.scss | 78 +++++++--------- .../views/animationtimeline/TimelineOverview.scss | 6 +- src/client/views/animationtimeline/Track.scss | 5 +- .../collections/CollectionCarousel3DView.scss | 6 +- .../views/collections/CollectionCarousel3DView.tsx | 5 +- .../views/collections/CollectionDockingView.scss | 2 +- src/client/views/collections/CollectionMenu.scss | 4 +- .../collections/CollectionNoteTakingView.scss | 2 +- .../collections/CollectionStackedTimeline.scss | 2 +- .../views/collections/CollectionStackingView.scss | 2 +- .../views/collections/CollectionTreeView.scss | 2 +- src/client/views/collections/CollectionView.scss | 2 +- src/client/views/collections/TabDocView.scss | 2 +- src/client/views/collections/TreeView.scss | 2 +- src/client/views/collections/TreeView.tsx | 3 +- .../CollectionFreeFormRemoteCursors.scss | 10 +- .../collectionFreeForm/CollectionFreeFormView.scss | 2 +- .../collectionLinear/CollectionLinearView.scss | 2 +- .../collectionSchema/CollectionSchemaView.scss | 2 +- .../views/global/globalCssVariables.module.scss | 96 +++++++++++++++++++ .../global/globalCssVariables.module.scss.d.ts | 21 +++++ src/client/views/global/globalCssVariables.scss | 96 ------------------- .../views/global/globalCssVariables.scss.d.ts | 21 ----- src/client/views/linking/LinkMenu.scss | 6 +- src/client/views/linking/LinkMenuItem.scss | 2 +- src/client/views/nodes/AudioBox.scss | 10 +- .../views/nodes/DataVizBox/components/Chart.scss | 2 +- .../views/nodes/DataVizBox/components/TableBox.tsx | 4 +- src/client/views/nodes/DocumentLinksButton.scss | 2 +- src/client/views/nodes/DocumentView.scss | 2 +- src/client/views/nodes/EquationBox.scss | 2 +- .../views/nodes/FontIconBox/FontIconBox.scss | 2 +- src/client/views/nodes/KeyValueBox.scss | 54 +++++------ src/client/views/nodes/KeyValuePair.scss | 2 +- src/client/views/nodes/LinkAnchorBox.tsx | 7 +- src/client/views/nodes/LinkDescriptionPopup.scss | 8 +- src/client/views/nodes/MapBox/MapBox.scss | 2 +- src/client/views/nodes/PDFBox.scss | 16 +--- src/client/views/nodes/RadialMenu.scss | 14 ++- src/client/views/nodes/VideoBox.scss | 8 +- src/client/views/nodes/WebBox.scss | 2 +- .../views/nodes/formattedText/DashFieldView.scss | 2 +- .../nodes/formattedText/FormattedTextBox.scss | 4 +- .../views/nodes/formattedText/RichTextMenu.scss | 11 +-- .../views/nodes/formattedText/TooltipTextMenu.scss | 102 ++++++++++----------- src/client/views/nodes/trails/PresBox.scss | 2 +- src/client/views/search/CheckBox.scss | 7 +- src/client/views/search/CollectionFilters.scss | 4 +- src/client/views/search/IconBar.scss | 4 +- src/client/views/search/IconButton.scss | 8 +- src/client/views/search/IconButton.tsx | 2 +- src/client/views/search/NaviconButton.scss | 2 +- src/client/views/search/SearchBox.scss | 17 ++-- src/client/views/search/SelectorContextMenu.scss | 4 +- src/client/views/search/ToggleBar.scss | 4 +- src/client/views/topbar/TopBar.scss | 3 +- src/client/views/webcam/DashWebRTCVideo.scss | 9 +- src/mobile/ImageUpload.scss | 13 +-- src/mobile/ImageUpload.tsx | 3 +- webpack.config.js | 28 +++--- 84 files changed, 450 insertions(+), 494 deletions(-) create mode 100644 src/client/views/global/globalCssVariables.module.scss create mode 100644 src/client/views/global/globalCssVariables.module.scss.d.ts delete mode 100644 src/client/views/global/globalCssVariables.scss delete mode 100644 src/client/views/global/globalCssVariables.scss.d.ts (limited to 'src/client/views/collections/TabDocView.scss') diff --git a/package-lock.json b/package-lock.json index 84b087892..4af642fc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -176,6 +176,7 @@ "reveal.js": "^5.0.2", "rimraf": "^5.0.5", "sass": "^1.69.5", + "sass-loader": "^13.3.2", "serializr": "^3.0.2", "shelljs": "^0.8.5", "socket.io": "^4.7.2", @@ -269,7 +270,6 @@ "mocha": "^10.2.0", "prettier": "^3.1.0", "react-type-animation": "^3.2.0", - "sass-loader": "^13.3.2", "scss-loader": "0.0.1", "style-loader": "^3.3.3", "ts-loader": "^9.5.1", @@ -25578,7 +25578,6 @@ "version": "13.3.2", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.2.tgz", "integrity": "sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==", - "dev": true, "dependencies": { "neo-async": "^2.6.2" }, diff --git a/package.json b/package.json index be944ff01..e99bf3734 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,6 @@ "mocha": "^10.2.0", "prettier": "^3.1.0", "react-type-animation": "^3.2.0", - "sass-loader": "^13.3.2", "scss-loader": "0.0.1", "style-loader": "^3.3.3", "ts-loader": "^9.5.1", @@ -262,6 +261,7 @@ "reveal.js": "^5.0.2", "rimraf": "^5.0.5", "sass": "^1.69.5", + "sass-loader": "^13.3.2", "serializr": "^3.0.2", "shelljs": "^0.8.5", "socket.io": "^4.7.2", diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 1b39fdb41..dd6d6cdf6 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -58,8 +58,9 @@ import { VideoBox } from '../views/nodes/VideoBox'; import { WebBox } from '../views/nodes/WebBox'; import { SearchBox } from '../views/search/SearchBox'; import { CollectionViewType, DocumentType } from './DocumentTypes'; -//import { DFLT_IMAGE_NATIVE_DIM } from '../views/global/globalCssVariables.scss'; -const DFLT_IMAGE_NATIVE_DIM = '900px'; +const { + default: { DFLT_IMAGE_NATIVE_DIM }, +} = require('../views/global/globalCssVariables.module.scss'); const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace('px', '')); class EmptyBox { diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss index 11e31fe2e..8679a0101 100644 --- a/src/client/util/CaptureManager.scss +++ b/src/client/util/CaptureManager.scss @@ -1,4 +1,4 @@ -@import "../views/global/globalCssVariables"; +@import '../views/global/globalCssVariables.module'; .capture-interface { //background-color: whitesmoke !important; @@ -39,7 +39,7 @@ align-items: center; justify-content: center; } - + .recordButtonInner { border-radius: 100%; width: 70%; @@ -106,7 +106,7 @@ display: flex; justify-content: center; align-items: center; - background-color: #BDDBE8; + background-color: #bddbe8; border-radius: 100%; font-weight: 800; margin-right: 5px; @@ -154,4 +154,3 @@ } } } - diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 427b1c85f..4b1cc1702 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -13,8 +13,7 @@ import { ScriptingGlobals } from './ScriptingGlobals'; import { SelectionManager } from './SelectionManager'; import { SnappingManager } from './SnappingManager'; import { UndoManager } from './UndoManager'; -// import * as globalCssVariables from '../views/global/globalCssVariables.scss'; -const contextMenuZindex = 100002; +const { default : { contextMenuZindex } } = require('../views/global/globalCssVariables.module.scss'); // prettier-ignore export type dropActionType = 'embed' | 'copy' | 'move' | 'add' | 'same' | 'inSame' | 'proto' | 'none' | undefined; // undefined = move, "same" = move but don't call dropPropertiesToRemove diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index bca649bc3..dbfc48c63 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -1,4 +1,4 @@ -@import '../views/global/globalCssVariables'; +@import '../views/global/globalCssVariables.module'; .settings-interface { //background-color: whitesmoke !important; @@ -187,14 +187,12 @@ display: flex; flex-direction: column; - .close-button { position: absolute; right: 2px; top: 2px; } - .settings-content { padding: 10px; width: 500px; diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss index cd6a1d934..d82d7fdeb 100644 --- a/src/client/util/reportManager/ReportManager.scss +++ b/src/client/util/reportManager/ReportManager.scss @@ -1,4 +1,4 @@ -@import '../../views/global/globalCssVariables'; +@import '../../views/global/globalCssVariables.module'; // header @@ -360,5 +360,8 @@ padding: 4px 10px; font-size: 10px; border-radius: 32px; - transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; + transition: + background-color 0.2s ease, + color 0.2s ease, + border-color 0.2s ease; } diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index b205a0f1e..4613cec76 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -1,5 +1,4 @@ -@import "./global/globalCssVariables"; - +@import './global/globalCssVariables.module'; .antimodeMenu-cont { position: absolute; @@ -16,7 +15,7 @@ gap: 3px; &.with-rows { - flex-direction: column + flex-direction: column; } .antimodeMenu-row { @@ -26,8 +25,8 @@ .antimodeMenu-dragger { height: 100%; - transition: width .2s; - background-image: url("https://logodix.com/logo/1020374.png"); + transition: width 0.2s; + background-image: url('https://logodix.com/logo/1020374.png'); background-size: 90% 100%; background-repeat: no-repeat; background-position: left center; @@ -63,4 +62,4 @@ background-color: #121212; } } -} \ No newline at end of file +} diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index 588eff1d1..232362c5c 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables'; +@import 'global/globalCssVariables.module.scss'; .contextMenu-cont { position: absolute; diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss index 6be2133ef..90f64b393 100644 --- a/src/client/views/DashboardView.scss +++ b/src/client/views/DashboardView.scss @@ -1,4 +1,4 @@ -@import './global/globalCssVariables'; +@import './global/globalCssVariables.module'; .dashboard-view { padding: 50px; @@ -7,18 +7,18 @@ width: 100%; position: absolute; height: 100%; - width:100%; + width: 100%; padding-right: 0px; overflow: auto; - .left-menu { - display: flex; - justify-content: flex-start; - flex-direction: column; - width: 250px; - min-width: 250px; - gap: 5px; - } + .left-menu { + display: flex; + justify-content: flex-start; + flex-direction: column; + width: 250px; + min-width: 250px; + gap: 5px; + } .all-dashboards { display: flex; @@ -75,20 +75,20 @@ left: 0; top: 0; z-index: -1; - } + } } .dashboard-container { - border-radius: 10px; - position: relative; - cursor: pointer; - width: 250px; - height: 200px; - outline: solid 2px $light-gray; - display: flex; - flex-direction: column; - margin: 0 0px 30px 30px; - overflow: hidden; + border-radius: 10px; + position: relative; + cursor: pointer; + width: 250px; + height: 200px; + outline: solid 2px $light-gray; + display: flex; + flex-direction: column; + margin: 0 0px 30px 30px; + overflow: hidden; &:hover { outline: solid 2px $light-blue; @@ -122,18 +122,18 @@ background: 'lightgreen'; } - .more { - z-index: 100; - } + .more { + z-index: 100; + } - .background { + .background { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; - } + } } .new-dashboard { diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 1abf33cac..11614d627 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables'; +@import 'global/globalCssVariables.module'; $linkGap: 3px; diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index bbd951481..ac0ef054c 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables'; +@import 'global/globalCssVariables.module'; $linkGap: 3px; $headerHeight: 20px; diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index d34df8742..15df03682 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -46,9 +46,7 @@ import { FieldView, FieldViewProps } from './nodes/FieldView'; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; import { PinProps, PresBox } from './nodes/trails'; import { StyleProp } from './StyleProvider'; -// import { INK_MASK_SIZE } from './global/globalCssVariables.scss'; -const INK_MASK_SIZE = 1000; - +const { default: { INK_MASK_SIZE } } = require('./global/globalCssVariables.module.scss'); // prettier-ignore @observer export class InkingStroke extends ViewBoxBaseComponent() { static readonly MaskDim = INK_MASK_SIZE; // choose a really big number to make sure mask fits over container (which in theory can be arbitrarily big) diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index a403a10e3..02916e48e 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables'; +@import 'global/globalCssVariables.module'; @import 'nodeModuleOverrides'; :root { diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 4fb2ac279..28a0f7750 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables'; +@import 'global/globalCssVariables.module.scss'; @import 'nodeModuleOverrides'; html { overscroll-behavior-x: none; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index a8f4020ee..1e4c1e1d3 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -69,9 +69,7 @@ import { PreviewCursor } from './PreviewCursor'; import { PropertiesView } from './PropertiesView'; import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider'; import { TopBar } from './topbar/TopBar'; -// import { LEFT_MENU_WIDTH, TOPBAR_HEIGHT } from './global/globalCssVariables.scss'; -const LEFT_MENU_WIDTH = '60px'; -const TOPBAR_HEIGHT = '37px'; +const { default: { LEFT_MENU_WIDTH, TOPBAR_HEIGHT } } = require('./global/globalCssVariables.module.scss'); // prettier-ignore const _global = (window /* browser */ || global) /* node */ as any; @observer diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index b801b3abf..b8c73b6d3 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -1,6 +1,6 @@ -@import "global/globalCssVariables"; +@import 'global/globalCssVariables.module.scss'; -$linkGap : 3px; +$linkGap: 3px; .propertiesButtons-linkFlyout { grid-column: 2/4; @@ -23,7 +23,7 @@ $linkGap : 3px; // margin-right: 7px; // margin-left: 8px; height: 28px; - // width: 226px;//29px; + // width: 226px;//29px; display: flex; align-items: center; // height: 25px; @@ -39,10 +39,9 @@ $linkGap : 3px; // font-size: 75%; transition: transform 0.2s; // text-align: center; - // justify-content: center; - + // margin-right: 10px; // margin-left: 4px; @@ -55,34 +54,34 @@ $linkGap : 3px; .propertiesButtons-linkButton-empty.toggle-on { background-color: $medium-blue; color: $white; - width:100% + width: 100%; } .propertiesButtons-linkButton-empty.toggle-hover { background-color: $light-blue; color: $black; - width:100% + width: 100%; } .propertiesButtons-linkButton-empty.toggle-off { - background-color: white;//$dark-gray; + background-color: white; //$dark-gray; color: black; //white; - width:100% + width: 100%; } .propertiesButtons-icon { - margin-left:8px; + margin-left: 8px; } .propertiesButtons { - position:relative; + position: relative; width: 100%; // margin-top: 3px; -// // grid-column: 1/4; -// width: 100%; -// height: auto; -// display: flex; -// // flex-direction: row; -// // flex-wrap: wrap; -// padding-bottom: 5.5px; + // // grid-column: 1/4; + // width: 100%; + // height: auto; + // display: flex; + // // flex-direction: row; + // // flex-wrap: wrap; + // padding-bottom: 5.5px; } .onClickFlyout-editScript { @@ -95,11 +94,10 @@ $linkGap : 3px; padding: 4px; } - .propertiesButtons-button { pointer-events: auto; - padding-right: 8px;//5px; - width: 100%;//width: 25px; + padding-right: 8px; //5px; + width: 100%; //width: 25px; border-radius: 5px; margin-right: 20px; margin-bottom: 8px; @@ -161,12 +159,11 @@ $linkGap : 3px; margin-left: 4px; &:hover { - filter:brightness(0.85); + filter: brightness(0.85); cursor: pointer; } } - @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); @@ -194,4 +191,4 @@ $linkGap : 3px; 100% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); } -} \ No newline at end of file +} diff --git a/src/client/views/PropertiesSection.scss b/src/client/views/PropertiesSection.scss index 321b6300c..3f92a70f8 100644 --- a/src/client/views/PropertiesSection.scss +++ b/src/client/views/PropertiesSection.scss @@ -1,11 +1,10 @@ -@import './global/globalCssVariables.scss'; +@import './global/globalCssVariables.module.scss'; .propertiesView-section { - .propertiesView-content { padding: 10px; } - + .propertiesView-sectionTitle { text-align: center; display: flex; @@ -14,7 +13,7 @@ font-weight: bold; justify-content: space-between; align-items: center; - + .propertiesView-sectionTitle-icon { width: 20px; height: 20px; diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index 2da2ec568..8581bdf73 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -1,4 +1,4 @@ -@import './global/globalCssVariables.scss'; +@import './global/globalCssVariables.module.scss'; .propertiesView-presentationTrails-title { display: flex; diff --git a/src/client/views/TemplateMenu.scss b/src/client/views/TemplateMenu.scss index f81cbdaab..4d0f1bf00 100644 --- a/src/client/views/TemplateMenu.scss +++ b/src/client/views/TemplateMenu.scss @@ -1,4 +1,4 @@ -@import "global/globalCssVariables"; +@import 'global/globalCssVariables.module.scss'; .templating-menu { position: absolute; pointer-events: auto; @@ -40,7 +40,8 @@ height: 100%; width: 100%; - .templateToggle, .chromeToggle { + .templateToggle, + .chromeToggle { text-align: left; color: black; } @@ -48,4 +49,4 @@ input { margin-right: 10px; } -} \ No newline at end of file +} diff --git a/src/client/views/_nodeModuleOverrides.scss b/src/client/views/_nodeModuleOverrides.scss index c99281323..db69d6e44 100644 --- a/src/client/views/_nodeModuleOverrides.scss +++ b/src/client/views/_nodeModuleOverrides.scss @@ -1,4 +1,4 @@ -@import './global/globalCssVariables'; +@import './global/globalCssVariables.module.scss'; // this file is for overriding all the css from installed node modules // goldenlayout stuff diff --git a/src/client/views/animationtimeline/Region.scss b/src/client/views/animationtimeline/Region.scss index f7476ab55..b390ae34e 100644 --- a/src/client/views/animationtimeline/Region.scss +++ b/src/client/views/animationtimeline/Region.scss @@ -1,4 +1,4 @@ -@import './../global/globalCssVariables.scss'; +@import './../global/globalCssVariables.module.scss'; $timelineColor: #9acedf; $timelineDark: #77a1aa; diff --git a/src/client/views/animationtimeline/Region.tsx b/src/client/views/animationtimeline/Region.tsx index 53c5c4718..bc87dc94d 100644 --- a/src/client/views/animationtimeline/Region.tsx +++ b/src/client/views/animationtimeline/Region.tsx @@ -6,7 +6,7 @@ import { List } from '../../../fields/List'; import { createSchema, defaultSpec, listSpec, makeInterface } from '../../../fields/Schema'; import { Cast, NumCast } from '../../../fields/Types'; import { Transform } from '../../util/Transform'; -import '../global/globalCssVariables.scss'; +import '../global/globalCssVariables.module.scss'; import './Region.scss'; import './Timeline.scss'; import { TimelineMenu } from './TimelineMenu'; diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss index 48422b789..35ba0fa7f 100644 --- a/src/client/views/animationtimeline/Timeline.scss +++ b/src/client/views/animationtimeline/Timeline.scss @@ -1,4 +1,4 @@ -@import "./../global/globalCssVariables.scss"; +@import './../global/globalCssVariables.module.scss'; $timelineColor: #9acedf; $timelineDark: #77a1aa; @@ -30,7 +30,6 @@ $timelineDark: #77a1aa; color: $timelineColor; margin-left: 3px; } - } .grid-box { @@ -61,7 +60,7 @@ $timelineDark: #77a1aa; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); - transition: .2s ease; + transition: 0.2s ease; } } @@ -128,7 +127,6 @@ $timelineDark: #77a1aa; // margin-top: 0.5px; } } - } .time-input { @@ -154,7 +152,7 @@ $timelineDark: #77a1aa; .number-label { color: black; transform: rotate(-90deg) translate(-15px, 8px); - font-size: .85em; + font-size: 0.85em; } .timeline-container { @@ -178,7 +176,6 @@ $timelineDark: #77a1aa; background-color: transparent; height: 30px; width: 100%; - } .scrubber { @@ -217,7 +214,6 @@ $timelineDark: #77a1aa; position: absolute; // box-shadow: -10px 0px 10px 10px red; } - } .currentTime { @@ -266,7 +262,6 @@ $timelineDark: #77a1aa; p { hyphens: auto; } - } } @@ -280,8 +275,6 @@ $timelineDark: #77a1aa; } } - - .overview { position: absolute; height: 50px; @@ -298,7 +291,6 @@ $timelineDark: #77a1aa; } } - .timeline-checker { height: auto; width: auto; @@ -312,11 +304,11 @@ $timelineDark: #77a1aa; width: auto; overflow: hidden; margin: 0px 10px; - cursor: pointer + cursor: pointer; } .check { width: 50px; height: 50px; } -} \ No newline at end of file +} diff --git a/src/client/views/animationtimeline/TimelineMenu.scss b/src/client/views/animationtimeline/TimelineMenu.scss index 43a89419e..de2042f17 100644 --- a/src/client/views/animationtimeline/TimelineMenu.scss +++ b/src/client/views/animationtimeline/TimelineMenu.scss @@ -1,56 +1,49 @@ -@import "./../global/globalCssVariables.scss"; +@import './../global/globalCssVariables.module.scss'; - -.timeline-menu-container{ +.timeline-menu-container { position: absolute; display: flex; box-shadow: $medium-gray 0.2vw 0.2vw 0.4vw; flex-direction: column; background: whitesmoke; z-index: 10000; - width: 200px; + width: 200px; padding-bottom: 10px; border-radius: 15px; - border: solid #BBBBBBBB 1px; - - + border: solid #bbbbbbbb 1px; - .timeline-menu-input{ - font: $sans-serif; - font-size: 13px; - width:100%; - text-transform: uppercase; - letter-spacing: 2px; - margin-left: 10px; - background-color: transparent; - border-width: 0px; - transition: border-width 500ms; + .timeline-menu-input { + font: $sans-serif; + font-size: 13px; + width: 100%; + text-transform: uppercase; + letter-spacing: 2px; + margin-left: 10px; + background-color: transparent; + border-width: 0px; + transition: border-width 500ms; } - .timeline-menu-input:hover{ - border-width: 2px; + .timeline-menu-input:hover { + border-width: 2px; } - - - - .timeline-menu-header{ - border-top-left-radius: 15px; - border-top-right-radius: 15px; - text-transform: uppercase; - background: $dark-gray; - letter-spacing: 2px; + .timeline-menu-header { + border-top-left-radius: 15px; + border-top-right-radius: 15px; + text-transform: uppercase; + background: $dark-gray; + letter-spacing: 2px; - .timeline-menu-header-desc{ - font:$sans-serif; - font-size: 13px; - text-align: center; - color: whitesmoke; + .timeline-menu-header-desc { + font: $sans-serif; + font-size: 13px; + text-align: center; + color: whitesmoke; } } - .timeline-menu-item { // width: 11vw; //10vw height: 30px; //2vh @@ -64,7 +57,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - transition: all .1s; + transition: all 0.1s; border-style: none; // padding: 10px 0px 10px 0px; white-space: nowrap; @@ -73,22 +66,21 @@ letter-spacing: 2px; text-transform: uppercase; padding-right: 20px; - padding-left: 10px; + padding-left: 10px; } .timeline-menu-item:hover { - border-width: .11px; + border-width: 0.11px; border-style: none; border-color: $medium-gray; border-bottom-style: solid; border-top-style: solid; - background: $medium-blue; + background: $medium-blue; } .timeline-menu-desc { - padding-left: 10px; - font:$sans-serif; - font-size: 13px; + padding-left: 10px; + font: $sans-serif; + font-size: 13px; } - -} \ No newline at end of file +} diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss index c8d96c399..2878232e6 100644 --- a/src/client/views/animationtimeline/TimelineOverview.scss +++ b/src/client/views/animationtimeline/TimelineOverview.scss @@ -1,4 +1,4 @@ -@import "./../global/globalCssVariables.scss"; +@import './../global/globalCssVariables.module.scss'; $timelineColor: #9acedf; $timelineDark: #77a1aa; @@ -66,8 +66,6 @@ $timelineDark: #77a1aa; } } - - .timeline-play-bar { position: relative; padding: 0px; @@ -104,4 +102,4 @@ $timelineDark: #77a1aa; border-radius: 20px; margin-top: -4px; cursor: pointer; -} \ No newline at end of file +} diff --git a/src/client/views/animationtimeline/Track.scss b/src/client/views/animationtimeline/Track.scss index f45e0556d..f56b2fe5f 100644 --- a/src/client/views/animationtimeline/Track.scss +++ b/src/client/views/animationtimeline/Track.scss @@ -1,7 +1,6 @@ -@import "./../global/globalCssVariables.scss"; +@import './../global/globalCssVariables.module.scss'; .track-container { - .track { .inner { top: 0px; @@ -12,4 +11,4 @@ z-index: 100; } } -} \ No newline at end of file +} diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index 1632d44db..a556d0fa7 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .collectionCarousel3DView-outer { height: 100%; position: relative; @@ -17,7 +17,9 @@ .collectionCarousel3DView-item, .collectionCarousel3DView-item-active { flex: 1; - transition: opacity 0.3s linear, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); + transition: + opacity 0.3s linear, + transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); pointer-events: none; opacity: 0.5; z-index: 1; diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 330cb93e4..f03e38850 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -13,10 +13,7 @@ import { StyleProp } from '../StyleProvider'; import { DocFocusOptions, DocumentView } from '../nodes/DocumentView'; import './CollectionCarousel3DView.scss'; import { CollectionSubView } from './CollectionSubView'; -// import { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } from '../global/globalCssVariables.scss'; -const CAROUSEL3D_CENTER_SCALE = '1'; -const CAROUSEL3D_SIDE_SCALE = '1'; -const CAROUSEL3D_TOP = '0'; +const { default: { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } } = require('../global/globalCssVariables.module.scss'); // prettier-ignore @observer export class CollectionCarousel3DView extends CollectionSubView() { @computed get scrollSpeed() { diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 11543bbe5..7fad3e463 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .lm_root { position: relative; diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 6eeccc94e..5d46649b2 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .collectionMenu-container { display: flex; @@ -19,4 +19,4 @@ display: flex; flex-direction: row; } -} \ No newline at end of file +} diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss index be1800d81..91a82d40f 100644 --- a/src/client/views/collections/CollectionNoteTakingView.scss +++ b/src/client/views/collections/CollectionNoteTakingView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .collectionNoteTakingView-DocumentButtons { display: none; diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss index a19d8e696..0ced3f9e3 100644 --- a/src/client/views/collections/CollectionStackedTimeline.scss +++ b/src/client/views/collections/CollectionStackedTimeline.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .collectionStackedTimeline-timelineContainer { height: 100%; diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 165ccbdb1..6225cc52a 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .collectionMasonryView { display: inline; diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 21efeba44..bbbef78b4 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .collectionTreeView-container { transform-origin: top left; diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss index 32b0c138d..de53a2c62 100644 --- a/src/client/views/collections/CollectionView.scss +++ b/src/client/views/collections/CollectionView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .collectionView { border-width: 0; diff --git a/src/client/views/collections/TabDocView.scss b/src/client/views/collections/TabDocView.scss index d447991a1..dd4c0b881 100644 --- a/src/client/views/collections/TabDocView.scss +++ b/src/client/views/collections/TabDocView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .tabDocView-content { height: 100%; diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index cbcc7c710..0a1946f09 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .treeView-label { max-height: 1.5em; diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 27ff7166d..20e7fa071 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -35,8 +35,7 @@ import { CollectionView } from './CollectionView'; import { TreeSort } from './TreeSort'; import './TreeView.scss'; import * as React from 'react'; -// import { TREE_BULLET_WIDTH } from '../global/globalCssVariables.scss'; -const TREE_BULLET_WIDTH = '10px'; +const { default: { TREE_BULLET_WIDTH } } = require('../global/globalCssVariables.module.scss'); // prettier-ignore export interface TreeViewProps { treeView: CollectionTreeView; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss index 5fa01b102..7951aff65 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss @@ -1,14 +1,12 @@ -@import "global/globalCssVariables"; +@import 'global/globalCssVariables.module.scss'; .collectionFreeFormRemoteCursors-cont { - - position:absolute; + position: absolute; z-index: $remoteCursors-zindex; transform-origin: 'center center'; } .collectionFreeFormRemoteCursors-canvas { - - position:absolute; + position: absolute; width: 20px; height: 20px; opacity: 0.5; @@ -21,4 +19,4 @@ // fontStyle: "italic", margin-left: -12; margin-top: 4; -} \ No newline at end of file +} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 1b596ab65..418c518ad 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; .collectionfreeformview-none { position: inherit; diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.scss b/src/client/views/collections/collectionLinear/CollectionLinearView.scss index 3c2f5ccd7..b8ceec139 100644 --- a/src/client/views/collections/collectionLinear/CollectionLinearView.scss +++ b/src/client/views/collections/collectionLinear/CollectionLinearView.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; @import '../../_nodeModuleOverrides'; .collectionLinearView { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 76bd392a5..02131ae22 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables.scss'; +@import '../../global/globalCssVariables.module.scss'; .collectionSchemaView { cursor: default; diff --git a/src/client/views/global/globalCssVariables.module.scss b/src/client/views/global/globalCssVariables.module.scss new file mode 100644 index 000000000..44e8efe23 --- /dev/null +++ b/src/client/views/global/globalCssVariables.module.scss @@ -0,0 +1,96 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); +// colors +$white: #ffffff; +$off-white: #fdfdfd; +$light-gray: #dfdfdf; +$medium-gray: #9f9f9f; +$medium-gray-dim: #9f9f9f30; +$dark-gray: #323232; +$black: #000000; + +$close-red: red; +$minimize-yellow: yellow; +$open-green: green; + +$light-blue: #bdddf5; +$light-blue-transparent: #bdddf590; +$medium-blue: #4476f7; +$medium-blue-alt: #0047ff54; +$pink: #e0217d; +$yellow: #f5d747; + +$close-red: #e48282; + +$drop-shadow: '#32323215'; + +$INK_MASK_SIZE: 50000; +$INK_MASK_SIZE_HALF: -25000px; + +//padding +$minimum-padding: 4px; +$medium-padding: 16px; +$large-padding: 32px; + +//icon sizes +$icon-size: 28px; + +// fonts +$sans-serif: 'Roboto', sans-serif; +$large-header: 16px; +$body-text: 13px; +$small-text: 10px; +// $sans-serif: "Roboto Slab", sans-serif; + +// misc values +$border-radius: 0.3em; +$search-thumnail-size: 130; +$topbar-height: 37px; +$antimodemenu-height: 36px; + +// dragged items +$contextMenu-zindex: 100002; // context menu shows up over everything +$radialMenu-zindex: 100000; // context menu shows up over everything + +// borders +$standard-border: solid 1px #9f9f9f; + +// border radius +$standard-border-radius: 3px; + +// shadow +$standard-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); + +$mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc +$docDecorations-zindex: 998; // then doc decorations appear over everything else +$remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right? +$SCHEMA_DIVIDER_WIDTH: 4; +$MINIMIZED_ICON_SIZE: 24; +$MAX_ROW_HEIGHT: 44px; +$DFLT_IMAGE_NATIVE_DIM: 900px; +$LEFT_MENU_WIDTH: 60px; +$TREE_BULLET_WIDTH: 20px; + +$CAROUSEL3D_CENTER_SCALE: 1.3; +$CAROUSEL3D_SIDE_SCALE: 0.6; +$CAROUSEL3D_TOP: 15; + +$DATA_VIZ_TABLE_ROW_HEIGHT: 30; + +:export { + contextMenuZindex: $contextMenu-zindex; + SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH; + MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE; + MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT; + SEARCH_THUMBNAIL_SIZE: $search-thumnail-size; + ANTIMODEMENU_HEIGHT: $antimodemenu-height; + TOPBAR_HEIGHT: $topbar-height; + DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM; + LEFT_MENU_WIDTH: $LEFT_MENU_WIDTH; + TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH; + INK_MASK_SIZE: $INK_MASK_SIZE; + MEDIUM_GRAY: $medium-gray; + CAROUSEL3D_CENTER_SCALE: $CAROUSEL3D_CENTER_SCALE; + CAROUSEL3D_SIDE_SCALE: $CAROUSEL3D_SIDE_SCALE; + CAROUSEL3D_TOP: $CAROUSEL3D_TOP; + DATA_VIZ_TABLE_ROW_HEIGHT: $DATA_VIZ_TABLE_ROW_HEIGHT; +} diff --git a/src/client/views/global/globalCssVariables.module.scss.d.ts b/src/client/views/global/globalCssVariables.module.scss.d.ts new file mode 100644 index 000000000..bcbb1f068 --- /dev/null +++ b/src/client/views/global/globalCssVariables.module.scss.d.ts @@ -0,0 +1,21 @@ +interface IGlobalScss { + contextMenuZindex: string; // context menu shows up over everything + SCHEMA_DIVIDER_WIDTH: string; + MINIMIZED_ICON_SIZE: string; + MAX_ROW_HEIGHT: string; + SEARCH_THUMBNAIL_SIZE: string; + ANTIMODEMENU_HEIGHT: string; + TOPBAR_HEIGHT: string; + DFLT_IMAGE_NATIVE_DIM: string; + LEFT_MENU_WIDTH: string; + TREE_BULLET_WIDTH: string; + INK_MASK_SIZE: number; + MEDIUM_GRAY: string; + CAROUSEL3D_CENTER_SCALE: string; + CAROUSEL3D_SIDE_SCALE: string; + CAROUSEL3D_TOP: string; + DATA_VIZ_TABLE_ROW_HEIGHT: string; +} +declare const globalCssVariables: IGlobalScss; + +export = globalCssVariables; diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss deleted file mode 100644 index 44e8efe23..000000000 --- a/src/client/views/global/globalCssVariables.scss +++ /dev/null @@ -1,96 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); -// colors -$white: #ffffff; -$off-white: #fdfdfd; -$light-gray: #dfdfdf; -$medium-gray: #9f9f9f; -$medium-gray-dim: #9f9f9f30; -$dark-gray: #323232; -$black: #000000; - -$close-red: red; -$minimize-yellow: yellow; -$open-green: green; - -$light-blue: #bdddf5; -$light-blue-transparent: #bdddf590; -$medium-blue: #4476f7; -$medium-blue-alt: #0047ff54; -$pink: #e0217d; -$yellow: #f5d747; - -$close-red: #e48282; - -$drop-shadow: '#32323215'; - -$INK_MASK_SIZE: 50000; -$INK_MASK_SIZE_HALF: -25000px; - -//padding -$minimum-padding: 4px; -$medium-padding: 16px; -$large-padding: 32px; - -//icon sizes -$icon-size: 28px; - -// fonts -$sans-serif: 'Roboto', sans-serif; -$large-header: 16px; -$body-text: 13px; -$small-text: 10px; -// $sans-serif: "Roboto Slab", sans-serif; - -// misc values -$border-radius: 0.3em; -$search-thumnail-size: 130; -$topbar-height: 37px; -$antimodemenu-height: 36px; - -// dragged items -$contextMenu-zindex: 100002; // context menu shows up over everything -$radialMenu-zindex: 100000; // context menu shows up over everything - -// borders -$standard-border: solid 1px #9f9f9f; - -// border radius -$standard-border-radius: 3px; - -// shadow -$standard-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); - -$mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc -$docDecorations-zindex: 998; // then doc decorations appear over everything else -$remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right? -$SCHEMA_DIVIDER_WIDTH: 4; -$MINIMIZED_ICON_SIZE: 24; -$MAX_ROW_HEIGHT: 44px; -$DFLT_IMAGE_NATIVE_DIM: 900px; -$LEFT_MENU_WIDTH: 60px; -$TREE_BULLET_WIDTH: 20px; - -$CAROUSEL3D_CENTER_SCALE: 1.3; -$CAROUSEL3D_SIDE_SCALE: 0.6; -$CAROUSEL3D_TOP: 15; - -$DATA_VIZ_TABLE_ROW_HEIGHT: 30; - -:export { - contextMenuZindex: $contextMenu-zindex; - SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH; - MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE; - MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT; - SEARCH_THUMBNAIL_SIZE: $search-thumnail-size; - ANTIMODEMENU_HEIGHT: $antimodemenu-height; - TOPBAR_HEIGHT: $topbar-height; - DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM; - LEFT_MENU_WIDTH: $LEFT_MENU_WIDTH; - TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH; - INK_MASK_SIZE: $INK_MASK_SIZE; - MEDIUM_GRAY: $medium-gray; - CAROUSEL3D_CENTER_SCALE: $CAROUSEL3D_CENTER_SCALE; - CAROUSEL3D_SIDE_SCALE: $CAROUSEL3D_SIDE_SCALE; - CAROUSEL3D_TOP: $CAROUSEL3D_TOP; - DATA_VIZ_TABLE_ROW_HEIGHT: $DATA_VIZ_TABLE_ROW_HEIGHT; -} diff --git a/src/client/views/global/globalCssVariables.scss.d.ts b/src/client/views/global/globalCssVariables.scss.d.ts deleted file mode 100644 index bcbb1f068..000000000 --- a/src/client/views/global/globalCssVariables.scss.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -interface IGlobalScss { - contextMenuZindex: string; // context menu shows up over everything - SCHEMA_DIVIDER_WIDTH: string; - MINIMIZED_ICON_SIZE: string; - MAX_ROW_HEIGHT: string; - SEARCH_THUMBNAIL_SIZE: string; - ANTIMODEMENU_HEIGHT: string; - TOPBAR_HEIGHT: string; - DFLT_IMAGE_NATIVE_DIM: string; - LEFT_MENU_WIDTH: string; - TREE_BULLET_WIDTH: string; - INK_MASK_SIZE: number; - MEDIUM_GRAY: string; - CAROUSEL3D_CENTER_SCALE: string; - CAROUSEL3D_SIDE_SCALE: string; - CAROUSEL3D_TOP: string; - DATA_VIZ_TABLE_ROW_HEIGHT: string; -} -declare const globalCssVariables: IGlobalScss; - -export = globalCssVariables; diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index 0b9f32eee..636b6415c 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .linkMenu { width: auto; @@ -11,7 +11,9 @@ display: inline-block; position: relative; border: 1px solid #e4e4e4; - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.19), + 0 6px 6px rgba(0, 0, 0, 0.23); max-height: 230px; overflow-y: scroll; z-index: 10; diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index e83f631a1..44c74236f 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .linkMenu-item { // border-top: 0.5px solid $medium-gray; diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index d40537776..4337401e3 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables.scss"; +@import '../global/globalCssVariables.module.scss'; .audiobox-container { width: 100%; @@ -116,18 +116,18 @@ width: 10px; } - input[type="range"] { + input[type='range'] { width: 50px; -webkit-appearance: none; background: none; margin: 5px; } - input[type="range"]:focus { + input[type='range']:focus { outline: none; } - input[type="range"]::-webkit-slider-runnable-track { + input[type='range']::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; @@ -136,7 +136,7 @@ border-radius: 3px; } - input[type="range"]::-webkit-slider-thumb { + input[type='range']::-webkit-slider-thumb { box-shadow: 0; border: 0; height: 10px; diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss index c788a64c2..c0c0f10a2 100644 --- a/src/client/views/nodes/DataVizBox/components/Chart.scss +++ b/src/client/views/nodes/DataVizBox/components/Chart.scss @@ -1,4 +1,4 @@ -@import '../../../global/globalCssVariables'; +@import '../../../global/globalCssVariables.module.scss'; .chart-container { display: flex; flex-direction: column; diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index 33be87f46..3e7d3af8c 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -11,9 +11,7 @@ import { DragManager } from '../../../../util/DragManager'; import { DocumentView } from '../../DocumentView'; import { DataVizView } from '../DataVizBox'; import './Chart.scss'; -//import { DATA_VIZ_TABLE_ROW_HEIGHT } from '../../../global/globalCssVariables.scss'; -const DATA_VIZ_TABLE_ROW_HEIGHT = '30'; - +const { default: { DATA_VIZ_TABLE_ROW_HEIGHT } } = require('../../../global/globalCssVariables.module.scss'); // prettier-ignore interface TableBoxProps { Document: Doc; layoutDoc: Doc; diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index 6da0b73ba..b32b27e65 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .documentLinksButton-wrapper { transform-origin: top left; diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 406a1b8fb..c4dab16fb 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .documentView-effectsWrapper { border-radius: inherit; diff --git a/src/client/views/nodes/EquationBox.scss b/src/client/views/nodes/EquationBox.scss index f5871db22..5009ec7a7 100644 --- a/src/client/views/nodes/EquationBox.scss +++ b/src/client/views/nodes/EquationBox.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .equationBox-cont { transform-origin: center; diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.scss b/src/client/views/nodes/FontIconBox/FontIconBox.scss index 9d9fa26b0..db2ffa756 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox/FontIconBox.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; .menuButton { height: 100%; diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss index ffcba4981..a44f614b2 100644 --- a/src/client/views/nodes/KeyValueBox.scss +++ b/src/client/views/nodes/KeyValueBox.scss @@ -1,7 +1,7 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .keyValueBox-cont { overflow-y: scroll; - width:100%; + width: 100%; height: 100%; background-color: $white; border: 1px solid $medium-gray; @@ -15,45 +15,45 @@ } $header-height: 30px; .keyValueBox-tbody { - width:100%; - height:100%; + width: 100%; + height: 100%; position: absolute; overflow-y: scroll; } .keyValueBox-key { display: inline-block; - height:100%; - width:50%; + height: 100%; + width: 50%; text-align: center; } .keyValueBox-fields { display: inline-block; - height:100%; - width:50%; + height: 100%; + width: 50%; text-align: center; } .keyValueBox-table { position: absolute; - width:100%; - height:100%; + width: 100%; + height: 100%; border-collapse: collapse; } .keyValueBox-td-key { - display:inline-block; - height:30px; + display: inline-block; + height: 30px; } .keyValueBox-td-value { - display:inline-block; - height:30px; + display: inline-block; + height: 30px; } .keyValueBox-valueRow { - width:100%; - height:30px; + width: 100%; + height: 30px; display: inline-block; } .keyValueBox-header { - width:100%; + width: 100%; position: relative; display: inline-block; background: $medium-gray; @@ -74,8 +74,8 @@ $header-height: 30px; .keyValueBox-evenRow { position: relative; display: flex; - width:100%; - height:$header-height; + width: 100%; + height: $header-height; background: $white; .formattedTextBox-cont { background: $white; @@ -86,10 +86,10 @@ $header-height: 30px; position: relative; } } -.keyValueBox-dividerDraggerThumb{ +.keyValueBox-dividerDraggerThumb { position: relative; width: 4px; - float: left; + float: left; height: 30px; width: 5px; z-index: 20; @@ -99,10 +99,10 @@ $header-height: 30px; background: black; pointer-events: all; } -.keyValueBox-dividerDragger{ - position: relative; +.keyValueBox-dividerDragger { + position: relative; width: 100%; - float: left; + float: left; height: 37px; z-index: 20; right: 0; @@ -114,10 +114,10 @@ $header-height: 30px; .keyValueBox-oddRow { position: relative; display: flex; - width:100%; - height:30px; + width: 100%; + height: 30px; background: $light-gray; .formattedTextBox-cont { background: $light-gray; } -} \ No newline at end of file +} diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss index c29af7817..46ea9c18e 100644 --- a/src/client/views/nodes/KeyValuePair.scss +++ b/src/client/views/nodes/KeyValuePair.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .keyValuePair-td-key { display: inline-block; diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx index 33c9b2e08..09ba0bc95 100644 --- a/src/client/views/nodes/LinkAnchorBox.tsx +++ b/src/client/views/nodes/LinkAnchorBox.tsx @@ -11,10 +11,11 @@ import { ViewBoxBaseComponent } from '../DocComponent'; import { StyleProp } from '../StyleProvider'; import { FieldView, FieldViewProps } from './FieldView'; import './LinkAnchorBox.scss'; -import { LinkDocPreview, LinkInfo } from './LinkDocPreview'; +import { LinkInfo } from './LinkDocPreview'; import * as React from 'react'; -// import globalCssVariables = require('../global/globalCssVariables.scss'); -const MEDIUM_GRAY = 'lightGray'; +const { + default: { MEDIUM_GRAY }, +} = require('../global/globalCssVariables.module.scss'); @observer export class LinkAnchorBox extends ViewBoxBaseComponent() { public static LayoutString(fieldKey: string) { diff --git a/src/client/views/nodes/LinkDescriptionPopup.scss b/src/client/views/nodes/LinkDescriptionPopup.scss index a8db5d360..104301656 100644 --- a/src/client/views/nodes/LinkDescriptionPopup.scss +++ b/src/client/views/nodes/LinkDescriptionPopup.scss @@ -1,7 +1,6 @@ -@import "../global/globalCssVariables.scss"; +@import '../global/globalCssVariables.module.scss'; .linkDescriptionPopup { - display: flex; flex-direction: row; justify-content: center; @@ -26,7 +25,6 @@ } .linkDescriptionPopup-btn { - float: right; justify-content: center; vertical-align: middle; @@ -53,6 +51,4 @@ color: black; } } - - -} \ No newline at end of file +} diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss index 242677231..9b00c30cf 100644 --- a/src/client/views/nodes/MapBox/MapBox.scss +++ b/src/client/views/nodes/MapBox/MapBox.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables.scss'; +@import '../../global/globalCssVariables.module.scss'; .mapBox { width: 100%; height: 100%; diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 8a68f9647..0f5e25a0c 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables.scss"; +@import '../global/globalCssVariables.module.scss'; .pdfBox, .pdfBox-interactive { @@ -38,7 +38,7 @@ box-shadow: $standard-box-shadow; transition: 0.2s; - &:hover{ + &:hover { filter: brightness(0.85); } } @@ -51,7 +51,8 @@ left: 5px; top: 5px; - .pdfBox-fwdBtn, .pdfBox-backBtn { + .pdfBox-fwdBtn, + .pdfBox-backBtn { background: #121721; height: 25px; width: 25px; @@ -119,7 +120,6 @@ background: none; } - .pdfBox-settingsCont { position: absolute; right: 0; @@ -194,7 +194,7 @@ justify-content: center; align-items: center; overflow: hidden; - transition: left .5s; + transition: left 0.5s; pointer-events: all; .pdfBox-searchBar { @@ -204,7 +204,6 @@ } } - .pdfBox-title-outer { width: 100%; height: 100%; @@ -269,7 +268,6 @@ // CSS adjusted for mobile devices @media only screen and (max-device-width: 480px) { - .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton, .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton { height: 60px; @@ -288,15 +286,11 @@ } } - - .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout, .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout { font-size: 30px; } - - .pdfBox .pdfBox-ui .pdfBox-overlayCont, .pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont { height: 60px; diff --git a/src/client/views/nodes/RadialMenu.scss b/src/client/views/nodes/RadialMenu.scss index 312b51013..9cd1ee23a 100644 --- a/src/client/views/nodes/RadialMenu.scss +++ b/src/client/views/nodes/RadialMenu.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .radialMenu-cont { position: absolute; @@ -26,7 +26,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - transition: all .1s; + transition: all 0.1s; border-style: none; white-space: nowrap; font-size: 13px; @@ -34,8 +34,7 @@ text-transform: uppercase; } -s -.radialMenu-itemSelected { +s .radialMenu-itemSelected { border-style: none; } @@ -50,8 +49,8 @@ s -moz-user-select: none; -ms-user-select: none; user-select: none; - transition: all .1s; - border-width: .11px; + transition: all 0.1s; + border-width: 0.11px; border-style: none; border-color: $medium-gray; // rgb(187, 186, 186); // padding: 10px 0px 10px 0px; @@ -62,9 +61,8 @@ s padding-left: 5px; } - .radialMenu-description { margin-left: 5px; text-align: left; display: inline; //need this? -} \ No newline at end of file +} diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index f90c19050..ae923ad60 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .mini-viewer { cursor: grab; @@ -172,7 +172,11 @@ top: 90%; transform: translate(-50%, -50%); width: 80%; - transition: top 0s, width 0s, opacity 0.3s, visibility 0.3s; + transition: + top 0s, + width 0s, + opacity 0.3s, + visibility 0.3s; } } diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index 511c91da0..a1686adaf 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .webBox { height: 100%; diff --git a/src/client/views/nodes/formattedText/DashFieldView.scss b/src/client/views/nodes/formattedText/DashFieldView.scss index ad315acc8..3426ba1a7 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.scss +++ b/src/client/views/nodes/formattedText/DashFieldView.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; .dashFieldView { position: relative; diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index 717efd5a9..03ff0436b 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; .ProseMirror { width: 100%; @@ -592,7 +592,7 @@ footnote::before { } @media only screen and (max-width: 1000px) { - @import '../../global/globalCssVariables'; + @import '../../global/globalCssVariables.module.scss'; .ProseMirror { width: 100%; diff --git a/src/client/views/nodes/formattedText/RichTextMenu.scss b/src/client/views/nodes/formattedText/RichTextMenu.scss index 8afa0f6b5..d6ed5ebee 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.scss +++ b/src/client/views/nodes/formattedText/RichTextMenu.scss @@ -1,4 +1,4 @@ -@import "../../global/globalCssVariables"; +@import '../../global/globalCssVariables.module.scss'; .button-dropdown-wrapper { position: relative; @@ -55,7 +55,6 @@ input { color: black; } - } .richTextMenu { @@ -68,12 +67,12 @@ font-size: 12px; height: 100%; margin-right: 3px; - + &:focus, &:hover { background-color: black; } - + &::-ms-expand { color: white; } @@ -126,7 +125,7 @@ display: flex; justify-content: space-between; - >div { + > div { display: flex; } -} \ No newline at end of file +} diff --git a/src/client/views/nodes/formattedText/TooltipTextMenu.scss b/src/client/views/nodes/formattedText/TooltipTextMenu.scss index 8c4d77da9..87320943d 100644 --- a/src/client/views/nodes/formattedText/TooltipTextMenu.scss +++ b/src/client/views/nodes/formattedText/TooltipTextMenu.scss @@ -1,9 +1,9 @@ -@import "../views/global/globalCssVariables"; +@import '../views/global/globalCssVariables.module.scss'; .ProseMirror-menu-dropdown-wrap { display: inline-block; position: relative; } - + .ProseMirror-menu-dropdown { vertical-align: 1px; cursor: pointer; @@ -17,11 +17,11 @@ margin-right: 4px; &:after { - content: ""; + content: ''; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; - opacity: .6; + opacity: 0.6; position: absolute; right: 4px; top: calc(50% - 2px); @@ -33,7 +33,7 @@ margin-right: -4px; } -.ProseMirror-menu-dropdown-menu, +.ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu { font-size: 12px; background: white; @@ -55,19 +55,18 @@ } } - .ProseMirror-menu-submenu-label:after { - content: ""; + content: ''; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid currentColor; - opacity: .6; + opacity: 0.6; position: absolute; right: 4px; top: calc(50% - 4px); } - - .ProseMirror-icon { + +.ProseMirror-icon { display: inline-block; // line-height: .8; // vertical-align: -2px; /* Compensate for padding */ @@ -79,14 +78,14 @@ } svg { - fill:white; + fill: white; height: 1em; } span { vertical-align: text-top; - } - } + } +} .wrapper { position: absolute; @@ -99,10 +98,10 @@ background: #323232; border-radius: 6px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); - } -.tooltipMenu, .basic-tools { +.tooltipMenu, +.basic-tools { z-index: 3000; pointer-events: all; padding: 3px; @@ -111,17 +110,17 @@ align-items: center; .ProseMirror-example-setup-style hr { - padding: 2px 10px; - border: none; - margin: 1em 0; + padding: 2px 10px; + border: none; + margin: 1em 0; } - + .ProseMirror-example-setup-style hr:after { - content: ""; - display: block; - height: 1px; - background-color: silver; - line-height: 2px; + content: ''; + display: block; + height: 1px; + background-color: silver; + line-height: 2px; } } @@ -142,7 +141,7 @@ } } - &> * { + & > * { margin-top: 50%; margin-left: 50%; transform: translate(-50%, -50%); @@ -168,7 +167,7 @@ background-color: black; } - &> * { + & > * { margin-top: 50%; margin-left: 50%; transform: translate(-50%, -50%); @@ -208,18 +207,17 @@ margin-top: 13px; } - .font-size-indicator { - font-size: 12px; - padding-right: 0px; - } - .summarize{ - color: white; - height: 20px; - text-align: center; - } - - -.brush{ +.font-size-indicator { + font-size: 12px; + padding-right: 0px; +} +.summarize { + color: white; + height: 20px; + text-align: center; +} + +.brush { display: inline-block; width: 1em; height: 1em; @@ -229,7 +227,7 @@ margin-right: 15px; } -.brush-active{ +.brush-active { display: inline-block; width: 1em; height: 1em; @@ -269,7 +267,6 @@ } .buttonSettings-dropdown { - &.ProseMirror-menu-dropdown { width: 10px; height: 25px; @@ -301,7 +298,7 @@ padding: 3px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); - .ProseMirror-menu-dropdown-item{ + .ProseMirror-menu-dropdown-item { cursor: default; &:last-child { @@ -312,7 +309,8 @@ background-color: #323232; } - .button-setting, .button-setting-disabled { + .button-setting, + .button-setting-disabled { padding: 2px; border-radius: 2px; } @@ -328,25 +326,23 @@ } input { - color: black; - border: none; - border-radius: 1px; - padding: 3px; + color: black; + border: none; + border-radius: 1px; + padding: 3px; } button { - padding: 6px; - background-color: #323232; - border: 1px solid black; - border-radius: 1px; + padding: 6px; + background-color: #323232; + border: 1px solid black; + border-radius: 1px; &:hover { - background-color: black; + background-color: black; } } } - - } } diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss index 0b51813a5..3b34a1f90 100644 --- a/src/client/views/nodes/trails/PresBox.scss +++ b/src/client/views/nodes/trails/PresBox.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; .presBox-cont { cursor: auto; diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss index 2a0085ade..4892facbc 100644 --- a/src/client/views/search/CheckBox.scss +++ b/src/client/views/search/CheckBox.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .checkboxfilter { display: flex; @@ -12,7 +12,7 @@ align-items: center; margin-top: 0px; - .check-container:hover~.check-box { + .check-container:hover ~ .check-box { background-color: $medium-blue; } @@ -55,5 +55,4 @@ text-transform: capitalize; margin-left: 15px; } - -} \ No newline at end of file +} diff --git a/src/client/views/search/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss index 845b16f67..6105df570 100644 --- a/src/client/views/search/CollectionFilters.scss +++ b/src/client/views/search/CollectionFilters.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .collection-filters { display: flex; @@ -17,4 +17,4 @@ float: right; opacity: 0; } -} \ No newline at end of file +} diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss index 6aaf7918d..05aa099f7 100644 --- a/src/client/views/search/IconBar.scss +++ b/src/client/views/search/IconBar.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .icon-bar { display: flex; @@ -7,4 +7,4 @@ height: auto; width: 100%; flex-direction: row-reverse; -} \ No newline at end of file +} diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss index 3cb08d756..d2a2ea369 100644 --- a/src/client/views/search/IconButton.scss +++ b/src/client/views/search/IconButton.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .type-outer { display: flex; @@ -24,7 +24,7 @@ .fontawesome-icon { height: 15px; - width: 15px + width: 15px; } } @@ -46,8 +46,8 @@ background-color: $medium-blue; opacity: 1; - +.filter-description { + + .filter-description { opacity: 1; } } -} \ No newline at end of file +} diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx index e12e4511c..20084b64d 100644 --- a/src/client/views/search/IconButton.tsx +++ b/src/client/views/search/IconButton.tsx @@ -4,7 +4,7 @@ import { action, IReactionDisposer, observable, reaction, runInAction } from 'mo import { observer } from 'mobx-react'; import * as React from 'react'; import { DocumentType } from '../../documents/DocumentTypes'; -import '../global/globalCssVariables.scss'; +import '../global/globalCssVariables.module.scss'; import { IconBar } from './IconBar'; import './IconButton.scss'; import './SearchBox.scss'; diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss index 13d31bbe9..917635c0b 100644 --- a/src/client/views/search/NaviconButton.scss +++ b/src/client/views/search/NaviconButton.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; $height-icon: 15px; $width-line: 30px; diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index a439aea3e..a3c4bd2ed 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -1,5 +1,5 @@ -@import "../global/globalCssVariables"; -@import "./NaviconButton.scss"; +@import '../global/globalCssVariables.module.scss'; +@import './NaviconButton.scss'; .searchBox-container { width: 100%; @@ -47,7 +47,6 @@ } .section-header { - .section-title { font-size: $body-text; font-weight: 600; @@ -57,7 +56,7 @@ display: flex; color: $light-gray; } - + padding: 5px 10px; display: flex; flex-direction: column; @@ -71,7 +70,7 @@ flex-direction: column; width: 100%; height: fit-content; - justify-content: "center"; + justify-content: 'center'; .searchBox-recommendations-view { margin-top: 10px; @@ -81,8 +80,6 @@ flex-direction: column; gap: 10px; padding: 0px 10px; - - } } @@ -91,8 +88,8 @@ flex-direction: column; width: 100%; height: fit-content; - justify-content: "center"; - + justify-content: 'center'; + .searchBox-results-view { display: inline-block; width: 100%; @@ -147,4 +144,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/client/views/search/SelectorContextMenu.scss b/src/client/views/search/SelectorContextMenu.scss index a114f679c..097a6107d 100644 --- a/src/client/views/search/SelectorContextMenu.scss +++ b/src/client/views/search/SelectorContextMenu.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .parents { background: $light-blue; @@ -13,4 +13,4 @@ border-color: $medium-blue; border-bottom-style: solid; } -} \ No newline at end of file +} diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss index 3a164f133..9e27db2bc 100644 --- a/src/client/views/search/ToggleBar.scss +++ b/src/client/views/search/ToggleBar.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .toggle-title { display: flex; @@ -38,4 +38,4 @@ border-radius: 10px; background-color: $white; } -} \ No newline at end of file +} diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss index 2237d5ac1..20245104e 100644 --- a/src/client/views/topbar/TopBar.scss +++ b/src/client/views/topbar/TopBar.scss @@ -1,5 +1,4 @@ -@import '../global/globalCssVariables'; - +@import '../global/globalCssVariables.module.scss'; .topbar-container { flex-direction: column; diff --git a/src/client/views/webcam/DashWebRTCVideo.scss b/src/client/views/webcam/DashWebRTCVideo.scss index 249aee9d6..5744ebbcd 100644 --- a/src/client/views/webcam/DashWebRTCVideo.scss +++ b/src/client/views/webcam/DashWebRTCVideo.scss @@ -1,11 +1,11 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .webcam-cont { background: whitesmoke; color: grey; border-radius: 15px; box-shadow: #9c9396 0.2vw 0.2vw 0.4vw; - border: solid #BBBBBBBB 5px; + border: solid #bbbbbbbb 5px; pointer-events: all; display: flex; flex-direction: column; @@ -44,7 +44,7 @@ #roomName { outline: none; border-radius: inherit; - border: 1px solid #BBBBBBBB; + border: 1px solid #bbbbbbbb; margin: 10px; padding: 10px; } @@ -79,5 +79,4 @@ margin: 5px; border: 1px solid black; } - -} \ No newline at end of file +} diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index 6669a3d21..e4156ee8e 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -1,4 +1,4 @@ -@import "../client/views/global/globalCssVariables.scss"; +@import '../client/views/global/globalCssVariables.module.scss'; .imgupload_cont { display: flex; @@ -50,7 +50,7 @@ z-index: -1; } - .inputfile+label { + .inputfile + label { font-weight: 700; color: black; background-color: rgba(0, 0, 0, 0); @@ -71,7 +71,7 @@ border-radius: 10px; } - .inputfile.active+label { + .inputfile.active + label { font-style: italic; color: black; background-color: lightgreen; @@ -81,7 +81,6 @@ .status { font-size: 2em; } - } .image-upload { @@ -134,5 +133,7 @@ border-radius: 20px; opacity: 0.2; background-color: black; - transition: all 2s, opacity 1.5s; -} \ No newline at end of file + transition: + all 2s, + opacity 1.5s; +} diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index ee212e4af..d2598c2db 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -14,8 +14,7 @@ import { Utils } from '../Utils'; import './ImageUpload.scss'; import { MobileInterface } from './MobileInterface'; import * as React from 'react'; -//import { DFLT_IMAGE_NATIVE_DIM } from '../client/views/global/globalCssVariables.scss'; -const DFLT_IMAGE_NATIVE_DIM = '50px'; +const { default: { DFLT_IMAGE_NATIVE_DIM } } = require('../client/views/global/globalCssVariables.module.scss'); // prettier-ignore export interface ImageUploadProps { Document: Doc; // Target document for upload (upload location) } diff --git a/webpack.config.js b/webpack.config.js index c1464ac2a..a153616b8 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -12,8 +12,8 @@ const plugins = [ // new ForkTsCheckerWebpackPlugin({ // typescript: { // // useTypescriptIncrementalApi: true, - // // tslint: true, - // memoryLimit: 4096, + // eslint: true, + // memoryLimit: 8192, // }, // // tslint: true, // // memoryLimit: 4096, @@ -108,16 +108,22 @@ module.exports = { }, { test: /\.scss|css$/, + exclude: /\.module\.scss$/i, use: [ - { - loader: 'style-loader', - }, - { - loader: 'css-loader', - }, - { - loader: 'sass-loader', - }, + { loader: 'style-loader' }, // eslint-disable-next-line prettier/prettier + { loader: 'css-loader' }, + { loader: 'sass-loader' }, + ], + }, + + // -------- + // SCSS MODULES - all have .module. in their name and can export to .tsx + { + test: /\.module\.scss$/i, + use: [ + { loader: 'style-loader' }, // eslint-disable-next-line prettier/prettier + { loader: 'css-loader', options: { modules: true } }, + { loader: 'sass-loader' }, ], }, { -- cgit v1.2.3-70-g09d2