217 lines
4.3 KiB
SCSS
217 lines
4.3 KiB
SCSS
@use "../abstracts/variables" as *;
|
|
@use "../abstracts/mixins" as *;
|
|
|
|
.tools-container {
|
|
@include flex-center;
|
|
position: fixed;
|
|
bottom: 32px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
padding: 8px;
|
|
gap: 10px;
|
|
box-shadow: #{$box-shadow-medium};
|
|
border-radius: #{$border-radius-large};
|
|
width: fit-content;
|
|
background: var(--background-color);
|
|
backdrop-filter: blur(20px);
|
|
z-index: 2;
|
|
outline: 1px solid var(--border-color);
|
|
outline-offset: -1px;
|
|
transition: transform 0.4s ease-in-out 0.01s;
|
|
|
|
&.visible {
|
|
transform: translate(-50%, -310px);
|
|
}
|
|
|
|
.split {
|
|
height: 20px;
|
|
width: 2px;
|
|
border-radius: #{$border-radius-small};
|
|
background: var(--text-disabled);
|
|
}
|
|
|
|
.draw-tools,
|
|
.transform-tools,
|
|
.general-options,
|
|
.activeDropicon {
|
|
@include flex-center;
|
|
gap: 2px;
|
|
// stylelint-disable-next-line
|
|
interpolate-size: allow-keywords;
|
|
width: 0;
|
|
opacity: 0;
|
|
animation: expandWidth 0.2s ease-in-out forwards;
|
|
will-change: width;
|
|
|
|
.tool-button {
|
|
@include flex-center;
|
|
height: 28px;
|
|
width: 28px;
|
|
cursor: pointer;
|
|
border-radius: #{$border-radius-medium};
|
|
position: relative;
|
|
|
|
&:hover {
|
|
background: color-mix(
|
|
in srgb,
|
|
var(--highlight-accent-color) 60%,
|
|
transparent
|
|
);
|
|
|
|
.tooltip {
|
|
opacity: 1;
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.active {
|
|
background: var(--background-color-accent);
|
|
|
|
&:hover {
|
|
background: var(--background-color-accent);
|
|
}
|
|
}
|
|
}
|
|
|
|
.activeDropicon {
|
|
gap: 2px;
|
|
|
|
.drop-down-option-button {
|
|
@include flex-center;
|
|
height: 28px;
|
|
cursor: pointer;
|
|
border-radius: #{$border-radius-small};
|
|
position: relative;
|
|
|
|
&:hover {
|
|
background: color-mix(
|
|
in srgb,
|
|
var(--highlight-accent-color) 60%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.drop-down-container {
|
|
position: absolute;
|
|
bottom: 40px;
|
|
left: 0;
|
|
padding: 2px 4px;
|
|
border-radius: #{$border-radius-medium};
|
|
background: var(--background-color);
|
|
backdrop-filter: blur(8px);
|
|
contain: layout paint;
|
|
will-change: backdrop-filter;
|
|
|
|
.option-list {
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
border-radius: #{$border-radius-medium};
|
|
gap: 6px;
|
|
padding: 2px;
|
|
padding-right: 12px;
|
|
margin: 2px 0;
|
|
|
|
&:hover {
|
|
background: var(--highlight-accent-color);
|
|
color: var(--accent-color);
|
|
|
|
path {
|
|
stroke: var(--accent-color);
|
|
}
|
|
}
|
|
|
|
.active-option {
|
|
height: 12px;
|
|
width: 12px;
|
|
@include flex-center;
|
|
}
|
|
|
|
.option {
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.toggle-threed-button {
|
|
@include flex-center;
|
|
padding: 4px;
|
|
border-radius: #{$border-radius-medium};
|
|
background: var(--background-color);
|
|
outline: 1px solid var(--border-color);
|
|
outline-offset: -1px;
|
|
gap: 5px;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
.tooltip {
|
|
opacity: 1;
|
|
transform: translateY(-4px);
|
|
}
|
|
}
|
|
|
|
.toggle-option {
|
|
font-size: var(--font-size-small);
|
|
padding: 2px;
|
|
z-index: 1;
|
|
transition: all 0.2s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
background: var(--background-color-accent);
|
|
left: 2px;
|
|
top: 2px;
|
|
height: 23px;
|
|
width: 23px;
|
|
border-radius: #{$border-radius-medium};
|
|
transition: all 0.2s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.active {
|
|
color: var(--text-button-color);
|
|
}
|
|
}
|
|
|
|
.toggled {
|
|
&::after {
|
|
left: 25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 0;
|
|
scale: 0.5;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
scale: 2;
|
|
}
|
|
}
|
|
|
|
@keyframes expandWidth {
|
|
from {
|
|
width: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
width: fit-content;
|
|
opacity: 1;
|
|
}
|
|
}
|