102 lines
2.5 KiB
Plaintext
102 lines
2.5 KiB
Plaintext
@import "./mixin.less";
|
|
|
|
.shortcuts-wrapper {
|
|
@apply flex flex-col justify-start items-start w-full py-0 px-2 mt-2 h-auto shrink-0 flex-nowrap;
|
|
.hide-scroll-bar();
|
|
|
|
> .title-text {
|
|
@apply flex flex-row justify-start items-center w-full px-4;
|
|
|
|
> .normal-text {
|
|
@apply text-sm leading-6 font-mono text-gray-400;
|
|
}
|
|
|
|
> .btn {
|
|
@apply flex flex-col justify-center items-center w-5 h-5 bg-gray-200 rounded ml-2 hover:shadow;
|
|
|
|
> .icon-img {
|
|
@apply w-4 h-4 text-gray-500;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .shortcuts-container {
|
|
@apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2;
|
|
|
|
> .shortcut-container {
|
|
@apply relative flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-2 rounded-lg text-base cursor-pointer select-none shrink-0 hover:bg-white;
|
|
|
|
&:hover {
|
|
> .btns-container {
|
|
@apply flex;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
> .shortcut-text-container {
|
|
@apply text-green-600;
|
|
}
|
|
}
|
|
|
|
> .shortcut-text-container {
|
|
@apply flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black;
|
|
|
|
> .icon-text {
|
|
@apply block w-4 shrink-0;
|
|
}
|
|
|
|
> .shortcut-text {
|
|
@apply truncate;
|
|
}
|
|
}
|
|
|
|
> .btns-container {
|
|
@apply flex-row justify-end items-center hidden shrink-0;
|
|
|
|
> .action-btn {
|
|
@apply flex flex-row justify-center items-center;
|
|
|
|
&.toggle-btn {
|
|
@apply text-gray-600;
|
|
|
|
> .icon-img {
|
|
@apply w-4 h-auto;
|
|
}
|
|
|
|
&:hover {
|
|
& + .action-btns-wrapper {
|
|
@apply flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .action-btns-wrapper {
|
|
@apply absolute top-6 right-0 flex-col justify-start items-start w-auto h-auto px-4 pt-3 hidden z-1;
|
|
|
|
> .action-btns-container {
|
|
@apply flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white;
|
|
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
|
|
|
|
> .btn {
|
|
@apply w-full text-sm leading-6 py-1 px-3 rounded text-left hover:bg-gray-100;
|
|
|
|
&.delete-btn {
|
|
@apply text-orange-600;
|
|
|
|
&.final-confirm {
|
|
@apply font-black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
@apply flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|