github.com/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-02-18 13:29:36 +01:00
Code Releases Wiki Activity

reuse scss variables in js for SSOT (#2867)

Browse Source
This commit is contained in:
David Luzar 2021-01-28 12:58:35 +01:00 committed by GitHub
parent 978e85a33b
commit d4e12a2962
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Avatar.scss
View File

@ -1,4 +1,4 @@
@import "../css/_variables";
@import "../css/variables.module";
.excalidraw {
.Avatar {

2
src/components/CollabButton.scss
View File

@ -1,4 +1,4 @@
@import "../css/_variables";
@import "../css/variables.module";
.excalidraw {
.CollabButton.is-collaborating {

2
src/components/ColorPicker.scss
View File

@ -1,4 +1,4 @@
@import "../css/_variables";
@import "../css/variables.module";
.excalidraw {
.color-picker {

2
src/components/ContextMenu.scss
View File

@ -1,4 +1,4 @@
@import "../css/_variables";
@import "../css/variables.module";
.excalidraw {
.context-menu {

2
src/components/Dialog.scss
View File

@ -1,4 +1,4 @@
@import "../css/_variables";
@import "../css/variables.module";
.excalidraw {
.Dialog {

2
src/components/ExportDialog.scss
View File

@ -1,4 +1,4 @@
@import "../css/_variables";
@import "../css/variables.module";
.excalidraw {
.ExportDialog__preview {

2
src/components/HelpDialog.scss
View File

@ -1,4 +1,4 @@
@import "../css/_variables";
@import "../css/variables.module";
.excalidraw {
.HelpDialog h3 {

2
src/components/HintViewer.scss
View File

@ -1,4 +1,4 @@
@import "../css/_variables";
@import "../css/variables.module";
// this is loosely based on the longest hint text
$wide-viewport-width: 1000px;

2
src/components/IconPicker.scss
View File

@ -1,4 +1,4 @@
@import "../css/_variables";
@import "../css/variables.module";
.excalidraw {
.picker-container {

2
src/components/Modal.scss
View File

@ -1,4 +1,4 @@
@import "../css/_variables";
@import "../css/variables.module";
.excalidraw {
.Modal {

2
src/components/PasteChartDialog.scss
View File

@ -1,4 +1,4 @@
@import "../css/_variables";
@import "../css/variables.module";
.excalidraw {
.PasteChartDialog {

2
src/components/Stats.scss
View File

@ -1,4 +1,4 @@
@import "../css/_variables";
@import "../css/variables.module";
.Stats {
position: fixed;

2
src/components/TextInput.scss
View File

@ -1,4 +1,4 @@
@import "../css/_variables.scss";
@import "../css/variables.module";
.excalidraw {
.TextInput {

2
src/components/Toast.scss
View File

@ -1,4 +1,4 @@
@import "../css/_variables";
@import "../css/variables.module";
.excalidraw {
.Toast {

2
src/components/ToolIcon.scss
View File

@ -1,5 +1,5 @@
@import "open-color/open-color.scss";
@import "../css/variables";
@import "../css/variables.module";
.excalidraw {
.ToolIcon {

2
src/components/Tooltip.scss
View File

@ -1,4 +1,4 @@
@import "../css/_variables";
@import "../css/variables.module";
.excalidraw {
.Tooltip {
position: relative;

2
src/css/styles.scss
View File

@ -1,4 +1,4 @@
@import "./_variables";
@import "./variables.module";
@import "./theme";
.excalidraw {

4
src/css/_variables.scss → src/css/variables.module.scss
View File

@ -2,3 +2,7 @@
// keep up to date with is-mobile.tsx
$is-mobile-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";
:export {
isMobileQuery: unquote($is-mobile-query);
}

2
src/excalidraw-app/collab/RoomDialog.scss
View File

@ -1,4 +1,4 @@
@import "../../css/_variables";
@import "../../css/variables.module";
.excalidraw {
.RoomDialog-linkContainer {

6
src/is-mobile.tsx
View File

@ -1,4 +1,5 @@
import React, { useState, useEffect, useRef, useContext } from "react";
import variables from "./css/variables.module.scss";
const context = React.createContext(false);
@ -10,10 +11,7 @@ export const IsMobileProvider = ({
const query = useRef<MediaQueryList>();
if (!query.current) {
query.current = window.matchMedia
? window.matchMedia(
// keep up to date with _variables.scss
"(max-width: 600px), (max-height: 500px) and (max-width: 1000px)",
)
? window.matchMedia(variables.isMobileQuery)
: (({
matches: false,
addListener: () => {},