mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-04-14 16:40:58 -04:00
89 lines
2 KiB
SCSS
89 lines
2 KiB
SCSS
@import "open-color/open-color";
|
|
@import "../../css/variables.module";
|
|
|
|
.excalidraw {
|
|
.layer-ui__sidebar {
|
|
position: absolute;
|
|
top: var(--sat);
|
|
bottom: var(--sab);
|
|
right: var(--sar);
|
|
z-index: 5;
|
|
|
|
box-shadow: var(--shadow-island);
|
|
overflow: hidden;
|
|
border-radius: var(--border-radius-lg);
|
|
margin: var(--space-factor);
|
|
width: calc(#{$right-sidebar-width} - var(--space-factor) * 2);
|
|
|
|
padding: 0.5rem;
|
|
box-sizing: border-box;
|
|
|
|
.Island {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ToolIcon__icon {
|
|
border-radius: var(--border-radius-md);
|
|
}
|
|
|
|
.ToolIcon__icon__close {
|
|
.Modal__close {
|
|
width: calc(var(--space-factor) * 7);
|
|
height: calc(var(--space-factor) * 7);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: var(--color-text);
|
|
}
|
|
}
|
|
|
|
.Island {
|
|
--padding: 0;
|
|
background-color: var(--island-bg-color);
|
|
border-radius: var(--border-radius-lg);
|
|
padding: calc(var(--padding) * var(--space-factor));
|
|
position: relative;
|
|
transition: box-shadow 0.5s ease-in-out;
|
|
}
|
|
}
|
|
|
|
.layer-ui__sidebar__header {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin: 2px 0 15px 0;
|
|
&:empty {
|
|
margin: 0;
|
|
}
|
|
button {
|
|
// 2px from the left to account for focus border of left-most button
|
|
margin: 0 2px;
|
|
}
|
|
}
|
|
|
|
.layer-ui__sidebar__header__buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.layer-ui__sidebar-dock-button {
|
|
@include toolbarButtonColorStates;
|
|
margin-right: 0.2rem;
|
|
|
|
.ToolIcon_type_floating .ToolIcon__icon {
|
|
width: calc(var(--space-factor) * 7);
|
|
height: calc(var(--space-factor) * 7);
|
|
svg {
|
|
// mirror
|
|
transform: scale(-1, 1);
|
|
}
|
|
}
|
|
|
|
.ToolIcon_type_checkbox {
|
|
&:not(.ToolIcon_toggle_opaque):checked + .ToolIcon__icon {
|
|
background-color: var(--color-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|