smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: Consistent CSS variable names and general housekeeping of styles (#2947)

Browse source
This commit is contained in:
Lipis 2021-02-16 20:22:18 +02:00 • committed by GitHub
parent 9c0f832a41
commit 9dd2257932
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 149 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/CollabButton.scss
View file

@ -2,7 +2,7 @@
.excalidraw {
.CollabButton.is-collaborating {
background-color: var(--button-special-active-background-color);
background-color: var(--button-special-active-bg-color);
.ToolIcon__icon svg,
.ToolIcon__label {

48
src/components/ColorPicker.scss
View file

@ -2,9 +2,9 @@
.excalidraw {
.color-picker {
background: var(--popup-background-color);
border: 0px solid transparentize($oc-white, 0.75);
box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px;
background: var(--popup-bg-color);
border: 0 solid transparentize($oc-white, 0.75);
box-shadow: transparentize($oc-black, 0.75) 0 1px 4px;
border-radius: 4px;
position: absolute;
@ -24,11 +24,11 @@
}
.color-picker-triangle {
width: 0px;
height: 0px;
width: 0;
height: 0;
border-style: solid;
border-width: 0px 9px 10px;
border-color: transparent transparent var(--popup-background-color);
border-width: 0 9px 10px;
border-color: transparent transparent var(--popup-bg-color);
position: absolute;
top: -10px;
@ -84,12 +84,12 @@
.color-picker-transparent {
border-radius: 4px;
box-shadow: transparentize($oc-black, 0.9) 0px 0px 0px 1px inset;
box-shadow: transparentize($oc-black, 0.9) 0 0 0 1px inset;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.color-picker-transparent,
@ -104,11 +104,11 @@
width: 1.875rem;
:root[dir="ltr"] & {
border-radius: 4px 0px 0px 4px;
border-radius: 4px 0 0 4px;
}
:root[dir="rtl"] & {
border-radius: 0px 4px 4px 0px;
border-radius: 0 4px 4px 0;
}
color: var(--input-label-color);
@ -144,7 +144,7 @@
}
.color-input-container:focus-within .color-picker-hash::after {
background: var(--input-background-color);
background: var(--input-bg-color);
:root[dir="ltr"] & {
right: -2px;
@ -163,19 +163,19 @@
width: 12ch; /* length of `transparent` + 1 */
margin: 0;
font-size: 1rem;
background-color: var(--input-background-color);
color: var(--text-color-primary);
border: 0px;
background-color: var(--input-bg-color);
color: var(--text-primary-color);
border: 0;
outline: none;
height: 1.75em;
box-shadow: var(--input-border-color) 0px 0px 0px 1px inset;
box-shadow: var(--input-border-color) 0 0 0 1px inset;
:root[dir="ltr"] & {
border-radius: 0px 4px 4px 0px;
border-radius: 0 4px 4px 0;
}
:root[dir="rtl"] & {
border-radius: 4px 0px 0px 4px;
border-radius: 4px 0 0 4px;
}
float: left;
@ -228,7 +228,7 @@
}
.color-picker-type-elementBackground .color-picker-keybinding {
color: #fff;
color: $oc-white;
}
.color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
@ -241,10 +241,10 @@
&.Appearance_dark {
.color-picker-type-elementBackground .color-picker-keybinding {
color: #000;
color: $oc-black;
}
.color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
color: #000;
color: $oc-black;
}
}
}

8
src/components/ContextMenu.scss
View file

@ -4,13 +4,13 @@
.context-menu {
position: relative;
border-radius: 4px;
box-shadow: 0px 3px 10px transparentize($oc-black, 0.8);
box-shadow: 0 3px 10px transparentize($oc-black, 0.8);
padding: 0;
list-style: none;
user-select: none;
margin: -0.25rem 0 0 0.125rem;
padding: 0.5rem 0;
background-color: var(--popup-secondary-background-color);
background-color: var(--popup-secondary-bg-color);
border: 1px solid var(--button-gray-3);
cursor: default;
}
@ -61,12 +61,12 @@
}
.context-menu-option:hover {
color: var(--popup-background-color);
color: var(--popup-bg-color);
background-color: var(--select-highlight-color);
&.dangerous {
.context-menu-option__label {
color: var(--popup-background-color);
color: var(--popup-bg-color);
}
background-color: $oc-red-6;
}

2
src/components/Dialog.scss
View file

@ -45,7 +45,7 @@
position: sticky;
top: 0;
padding: calc(var(--space-factor) * 2);
background: var(--bg-color-island);
background: var(--island-bg-color);
font-size: 1.25em;
box-sizing: border-box;

2
src/components/HintViewer.scss
View file

@ -26,7 +26,7 @@ $wide-viewport-width: 1000px;
> span {
padding: 0.2rem 0.4rem;
background-color: var(--overlay-background-color);
background-color: var(--overlay-bg-color);
border-radius: 4px;
}
}

22
src/components/IconPicker.scss
View file

@ -8,9 +8,9 @@
}
.picker {
background: var(--popup-background-color);
border: 0px solid transparentize($oc-white, 0.75);
box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px;
background: var(--popup-bg-color);
border: 0 solid transparentize($oc-white, 0.75);
box-shadow: transparentize($oc-black, 0.75) 0 1px 4px;
border-radius: 4px;
position: absolute;
}
@ -56,8 +56,8 @@
}
.picker-triangle {
width: 0px;
height: 0px;
width: 0;
height: 0;
position: relative;
top: -10px;
:root[dir="ltr"] & {
@ -73,7 +73,7 @@
content: "";
position: absolute;
border-style: solid;
border-width: 0px 9px 10px;
border-width: 0 9px 10px;
border-color: transparent transparent transparentize($oc-black, 0.9);
top: -1px;
}
@ -82,8 +82,8 @@
content: "";
position: absolute;
border-style: solid;
border-width: 0px 9px 10px;
border-color: transparent transparent var(--popup-background-color);
border-width: 0 9px 10px;
border-color: transparent transparent var(--popup-bg-color);
}
}
@ -121,7 +121,7 @@
}
.picker-type-elementBackground .picker-keybinding {
color: #fff;
color: $oc-white;
}
.picker-swatch[aria-label="transparent"] .picker-keybinding {
@ -134,10 +134,10 @@
&.Appearance_dark {
.picker-type-elementBackground .picker-keybinding {
color: #000;
color: $oc-black;
}
.picker-swatch[aria-label="transparent"] .picker-keybinding {
color: #000;
color: $oc-black;
}
}
}

2
src/components/Island.scss
View file

@ -1,7 +1,7 @@
.excalidraw {
.Island {
--padding: 0;
background-color: var(--bg-color-island);
background-color: var(--island-bg-color);
backdrop-filter: saturate(100%) blur(10px);
box-shadow: var(--shadow-island);
border-radius: 4px;

4
src/components/LayerUI.scss
View file

@ -73,7 +73,7 @@
&__footer {
position: absolute;
z-index: 100;
bottom: 0px;
bottom: 0;
:root[dir="ltr"] & {
right: 0;
@ -94,7 +94,7 @@
}
:root[dir="ltr"] &.transition-right {
transform: translate(999px, 0px);
transform: translate(999px, 0);
}
:root[dir="rtl"] &.transition-left {

4
src/components/Modal.scss
View file

@ -44,10 +44,10 @@
overflow-y: auto;
// for modals, reset blurry bg
background: var(--bg-color-island);
background: var(--island-bg-color);
backdrop-filter: none;
border: 1px solid var(--dialog-border);
border: 1px solid var(--dialog-border-color);
box-shadow: 0 2px 10px transparentize($oc-black, 0.75);
border-radius: 6px;

82
src/components/Stats.scss
View file

@ -1,51 +1,53 @@
@import "../css/variables.module";
.Stats {
position: absolute;
top: 64px;
right: 12px;
font-size: 12px;
z-index: 999;
.excalidraw {
.Stats {
position: absolute;
top: 64px;
right: 12px;
font-size: 12px;
z-index: 999;
h3 {
margin: 0 24px 8px 0;
white-space: nowrap;
}
h3 {
margin: 0 24px 8px 0;
white-space: nowrap;
}
.close {
float: right;
height: 16px;
width: 16px;
cursor: pointer;
svg {
.close {
float: right;
height: 16px;
width: 16px;
cursor: pointer;
svg {
width: 100%;
height: 100%;
}
}
table {
width: 100%;
height: 100%;
th {
border-bottom: 1px solid var(--input-border-color);
padding: 4px;
}
tr {
td:nth-child(2) {
min-width: 24px;
text-align: right;
}
}
}
}
table {
width: 100%;
th {
border-bottom: 1px solid var(--input-border-color);
padding: 4px;
}
tr {
td:nth-child(2) {
min-width: 24px;
text-align: right;
:root[dir="rtl"] & {
left: 12px;
right: initial;
h3 {
margin: 0 0 8px 24px;
}
.close {
float: left;
}
}
}
:root[dir="rtl"] & {
left: 12px;
right: initial;
h3 {
margin: 0 0 8px 24px;
}
.close {
float: left;
}
}
}

6
src/components/TextInput.scss
View file

@ -2,18 +2,18 @@
.excalidraw {
.TextInput {
color: var(--text-color-primary);
color: var(--text-primary-color);
display: inline-block;
border: 1.5px solid var(--button-gray-1);
line-height: 1;
padding: 0.75rem;
white-space: nowrap;
border-radius: var(--space-factor);
background-color: var(--input-background-color);
background-color: var(--input-bg-color);
&:not(:focus) {
&:hover {
background-color: var(--input-hover-background-color);
background-color: var(--input-hover-bg-color);
}
}