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

feat: generic button export (#6092)

Browse source 
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Barnabás Molnár 2023-01-12 13:06:00 +01:00 • committed by GitHub
parent 328ff6c32d
commit 699897f71b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 90 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/css/styles.scss
View file

@ -408,7 +408,7 @@
pointer-events: all;
&:hover {
background-color: var(--button-hover);
background-color: var(--button-hover-bg);
}
&:active {

4
src/css/theme.scss
View file

@ -35,7 +35,7 @@
--shadow-island: 0px 7px 14px rgba(0, 0, 0, 0.05),
0px 0px 3.12708px rgba(0, 0, 0, 0.0798),
0px 0px 0.931014px rgba(0, 0, 0, 0.1702);
--button-hover: var(--color-gray-10);
--button-hover-bg: var(--color-gray-10);
--default-border-color: var(--color-gray-30);
--default-button-size: 2rem;
@ -135,7 +135,7 @@
--popup-text-inverted-color: #2c2c2c;
--select-highlight-color: #{$oc-blue-4};
--text-primary-color: var(--color-gray-40);
--button-hover: var(--color-gray-80);
--button-hover-bg: var(--color-gray-80);
--default-border-color: var(--color-gray-80);
--shadow-island: 0px 13px 33px rgba(0, 0, 0, 0.07),
0px 4.13px 9.94853px rgba(0, 0, 0, 0.0456112),

26
src/css/variables.module.scss
View file

@ -39,11 +39,11 @@
.ToolIcon__icon {
&:hover {
background: var(--button-hover);
background: var(--button-hover-bg);
}
&:active {
background: var(--button-hover);
background: var(--button-hover-bg);
border: 1px solid var(--color-primary-darkest);
}
}
@ -54,24 +54,25 @@
justify-content: center;
align-items: center;
padding: 0.625rem;
width: var(--default-button-size);
height: var(--default-button-size);
width: var(--button-width, var(--default-button-size));
height: var(--button-height, var(--default-button-size));
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: var(--default-border-color);
border-color: var(--button-border, var(--default-border-color));
border-radius: var(--border-radius-lg);
cursor: pointer;
background-color: transparent;
color: var(--text-primary-color);
background-color: var(--button-bg, var(--island-bg-color));
color: var(--button-color, var(--text-primary-color));
&:hover {
background-color: var(--button-hover);
background-color: var(--button-hover-bg);
border-color: var(--button-hover-border, var(--default-border-color));
}
&:active {
background-color: var(--button-hover);
border-color: var(--color-primary-darkest);
background-color: var(--button-active-bg);
border-color: var(--button-active-border, var(--color-primary-darkest));
}
&.active {
@ -83,7 +84,10 @@
}
svg {
color: var(--color-primary-darker);
color: var(--button-color, var(--color-primary-darker));
width: var(--button-width, var(--lg-icon-size));
height: var(--button-height, var(--lg-icon-size));
}
}
}