2021-11-17 23:53:43 +05:30
|
|
|
@import "../css/variables.module";
|
|
|
|
|
2020-09-26 02:48:45 +05:30
|
|
|
.excalidraw {
|
|
|
|
.library-unit {
|
|
|
|
align-items: center;
|
|
|
|
border: 1px solid var(--button-gray-2);
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
position: relative;
|
|
|
|
width: 63px;
|
|
|
|
height: 63px; // match width
|
2021-11-17 23:53:43 +05:30
|
|
|
|
|
|
|
&--hover {
|
|
|
|
box-shadow: inset 0px 0px 0px 2px $oc-blue-5;
|
|
|
|
border-color: $oc-blue-5;
|
|
|
|
}
|
|
|
|
|
|
|
|
&--selected {
|
|
|
|
box-shadow: inset 0px 0px 0px 2px $oc-blue-8;
|
|
|
|
border-color: $oc-blue-8;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.theme--dark .library-unit {
|
|
|
|
border-color: rgb(48, 48, 48);
|
2020-09-26 02:48:45 +05:30
|
|
|
}
|
2020-07-10 02:20:23 -07:00
|
|
|
|
2020-09-26 02:48:45 +05:30
|
|
|
.library-unit__dragger {
|
|
|
|
display: flex;
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
}
|
2020-07-10 02:20:23 -07:00
|
|
|
|
2020-09-26 02:48:45 +05:30
|
|
|
.library-unit__dragger > svg {
|
2021-03-13 18:58:06 +05:30
|
|
|
filter: var(--theme-filter);
|
2020-09-26 02:48:45 +05:30
|
|
|
flex-grow: 1;
|
|
|
|
max-height: 100%;
|
|
|
|
max-width: 100%;
|
|
|
|
}
|
2020-07-10 02:20:23 -07:00
|
|
|
|
2021-11-17 23:53:43 +05:30
|
|
|
.library-unit__checkbox-container,
|
|
|
|
.library-unit__checkbox-container:hover,
|
|
|
|
.library-unit__checkbox-container:active {
|
2020-09-26 02:48:45 +05:30
|
|
|
align-items: center;
|
|
|
|
background: none;
|
|
|
|
border: none;
|
|
|
|
color: var(--icon-fill-color);
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
margin: 0;
|
2021-11-17 23:53:43 +05:30
|
|
|
padding: 0.5rem;
|
2020-09-26 02:48:45 +05:30
|
|
|
position: absolute;
|
2021-11-17 23:53:43 +05:30
|
|
|
left: 2rem;
|
|
|
|
bottom: 2rem;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
input {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.library-unit__checkbox {
|
|
|
|
position: absolute;
|
|
|
|
left: 2.3rem;
|
|
|
|
bottom: 2.3rem;
|
|
|
|
|
|
|
|
.Checkbox-box {
|
|
|
|
width: 13px;
|
|
|
|
height: 13px;
|
|
|
|
border-radius: 2px;
|
|
|
|
margin: 0.5em 0.5em 0.2em 0.2em;
|
|
|
|
background-color: $oc-blue-1;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.Checkbox:hover {
|
|
|
|
.Checkbox-box {
|
|
|
|
background-color: $oc-blue-2;
|
|
|
|
}
|
|
|
|
}
|
2020-09-26 02:48:45 +05:30
|
|
|
}
|
2020-07-10 02:20:23 -07:00
|
|
|
|
2020-09-26 02:48:45 +05:30
|
|
|
.library-unit__removeFromLibrary > svg {
|
|
|
|
height: 16px;
|
|
|
|
width: 16px;
|
|
|
|
}
|
2020-07-10 02:20:23 -07:00
|
|
|
|
2021-11-17 23:53:43 +05:30
|
|
|
.library-unit__adder {
|
2020-09-26 02:48:45 +05:30
|
|
|
transform: scale(1);
|
2021-11-17 23:53:43 +05:30
|
|
|
animation: library-unit__adder-animation 1s ease-in infinite;
|
2020-09-26 02:48:45 +05:30
|
|
|
}
|
2020-07-10 02:20:23 -07:00
|
|
|
|
2020-09-26 02:48:45 +05:30
|
|
|
.library-unit__adder {
|
|
|
|
position: absolute;
|
2021-11-17 23:53:43 +05:30
|
|
|
left: 40%;
|
|
|
|
top: 40%;
|
|
|
|
width: 2rem;
|
|
|
|
height: 2rem;
|
2020-09-26 02:48:45 +05:30
|
|
|
margin-left: -10px;
|
|
|
|
margin-top: -10px;
|
|
|
|
pointer-events: none;
|
2020-07-10 02:20:23 -07:00
|
|
|
}
|
2021-11-17 23:53:43 +05:30
|
|
|
.library-unit--hover .library-unit__adder {
|
|
|
|
color: $oc-blue-7;
|
|
|
|
}
|
2020-07-10 02:20:23 -07:00
|
|
|
|
2020-09-26 02:48:45 +05:30
|
|
|
.library-unit__active {
|
|
|
|
cursor: pointer;
|
2020-07-10 02:20:23 -07:00
|
|
|
}
|
|
|
|
|
2021-11-17 23:53:43 +05:30
|
|
|
@keyframes library-unit__adder-animation {
|
2020-09-26 02:48:45 +05:30
|
|
|
0% {
|
2021-11-17 23:53:43 +05:30
|
|
|
transform: scale(0.85);
|
2020-09-26 02:48:45 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
50% {
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
|
|
|
|
|
|
|
100% {
|
2021-11-17 23:53:43 +05:30
|
|
|
transform: scale(0.85);
|
2020-09-26 02:48:45 +05:30
|
|
|
}
|
2020-07-10 02:20:23 -07:00
|
|
|
}
|
|
|
|
}
|