109 lines
2.7 KiB
Text
109 lines
2.7 KiB
Text
@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 p-1 h-5 bg-gray-200 rounded ml-2 shadow hover:opacity-80;
|
|
|
|
> .icon-img {
|
|
@apply opacity-60;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .create-shortcut-btn-container {
|
|
@apply flex flex-row justify-start items-center w-full mt-4 mb-2 ml-4;
|
|
|
|
> .btn {
|
|
@apply flex p-2 px-4 rounded-lg text-sm border border-dashed border-blue-600;
|
|
|
|
&:hover {
|
|
@apply bg-blue-600 text-white;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .shortcuts-container {
|
|
@apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2;
|
|
|
|
> .shortcut-container {
|
|
@apply 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 w-6 h-6 shrink-0;
|
|
|
|
&.toggle-btn {
|
|
@apply opacity-60;
|
|
|
|
&:hover {
|
|
& + .action-btns-wrapper {
|
|
@apply flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .action-btns-wrapper {
|
|
@apply flex-col justify-start items-start absolute top-6 right-0 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|