usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-10-04 15:28:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

choe: update shortcut actived style

Browse Source
This commit is contained in:
boojack 2022-07-04 21:45:54 +08:00
parent 49666ddaf3
commit 17a61bb65f
3 changed files with 6 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/ShortcutList.tsx
View File

@ -1,7 +1,6 @@
import { useEffect } from "react";
import { locationService, shortcutService } from "../services";
import { useAppSelector } from "../store";
import { UNKNOWN_ID } from "../helpers/consts";
import * as utils from "../helpers/utils";
import useToggle from "../hooks/useToggle";
import useLoading from "../hooks/useLoading";
@ -113,12 +112,11 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
<>
<div className={`shortcut-container ${isActive ? "active" : ""}`} onClick={handleShortcutClick}>
<div className="shortcut-text-container">
{/* <span className="icon-text">#</span> */}
<span className="shortcut-text">{shortcut.title}</span>
</div>
<div className="btns-container">
<span className="action-btn toggle-btn">
<img className="icon-img" src={`/icons/more${isActive ? "-white" : ""}.svg`} />
<img className="icon-img" src="/icons/more.svg" />
</span>
<div className="action-btns-wrapper">
<div className="action-btns-container">

11
web/src/less/shortcut-list.less
View File

@ -36,7 +36,7 @@
@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-gray-200;
@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 {
@ -45,18 +45,13 @@
}
&.active {
@apply bg-green-600;
> .shortcut-text-container {
> * {
@apply text-white;
}
@apply text-green-600;
}
}
> .shortcut-text-container {
@apply flex flex-row justify-start items-center truncate shrink leading-5 mr-1;
color: @text-black;
@apply flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black;
> .icon-text {
@apply block w-4 shrink-0;

6
web/src/less/tag-list.less
View File

@ -23,13 +23,11 @@
}
.tag-item-container {
@apply flex flex-row justify-between items-center w-full h-10 py-0 px-4 rounded-lg text-base shrink-0 select-none cursor-pointer hover:bg-gray-200;
@apply flex flex-row justify-between items-center w-full h-10 py-0 px-4 rounded-lg text-base shrink-0 select-none cursor-pointer hover:bg-white;
&.active {
> .tag-text-container {
> * {
@apply text-green-600;
}
@apply text-green-600;
}
}