diff options
82 files changed, 333 insertions, 377 deletions
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<FieldViewProps>() { 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.scss b/src/client/views/global/globalCssVariables.module.scss index 44e8efe23..44e8efe23 100644 --- a/src/client/views/global/globalCssVariables.scss +++ b/src/client/views/global/globalCssVariables.module.scss diff --git a/src/client/views/global/globalCssVariables.scss.d.ts b/src/client/views/global/globalCssVariables.module.scss.d.ts index bcbb1f068..bcbb1f068 100644 --- a/src/client/views/global/globalCssVariables.scss.d.ts +++ b/src/client/views/global/globalCssVariables.module.scss.d.ts 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<FieldViewProps>() { 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' }, ], }, { |