mirror of
https://github.com/usememos/memos.git
synced 2025-01-31 17:48:12 +08:00
chore: update button style
This commit is contained in:
boojack
parent
c492317ffe
commit
18fc93789b
9 changed files with 35 additions and 146 deletions
|
|
@ -89,7 +89,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
|
|||
<>
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text">
|
||||
<span className="icon-text">🎯</span>
|
||||
<span className="icon-text">🚀</span>
|
||||
{shortcutId ? "Edit Shortcut" : "Create Shortcut"}
|
||||
</p>
|
||||
<button className="btn close-btn" onClick={destroy}>
|
||||
|
|
@ -99,7 +99,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
|
|||
<div className="dialog-content-container">
|
||||
<div className="form-item-container input-form-container">
|
||||
<span className="normal-text">Title</span>
|
||||
<input className="title-input" type="text" value={title} onChange={handleTitleInputChange} />
|
||||
<input className="title-input" type="text" placeholder="shortcut title" value={title} onChange={handleTitleInputChange} />
|
||||
</div>
|
||||
<div className="form-item-container filter-form-container">
|
||||
<span className="normal-text">Filters</span>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
|
||||
.selector-wrapper {
|
||||
.flex(column, flex-start, flex-start);
|
||||
position: relative;
|
||||
height: 28px;
|
||||
@apply relative h-7;
|
||||
|
||||
> .current-value-container {
|
||||
.flex(row, space-between, center);
|
||||
|
|
@ -11,48 +10,29 @@
|
|||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: @bg-whitegray;
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
> .value-text {
|
||||
margin-right: 0px;
|
||||
font-size: 13px;
|
||||
line-height: 32px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@apply text-sm mr-0 truncate;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
> .arrow-text {
|
||||
.flex(row, center, center);
|
||||
width: 16px;
|
||||
flex-shrink: 0;
|
||||
@apply w-4 shrink-0;
|
||||
|
||||
> .icon-img {
|
||||
width: 16px;
|
||||
height: auto;
|
||||
opacity: 0.6;
|
||||
transform: rotate(90deg);
|
||||
@apply w-4 h-auto opacity-80 rotate-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .items-wrapper {
|
||||
.flex(column, flex-start, flex-start);
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: auto;
|
||||
@apply absolute top-full left-0 w-auto p-1 mt-1 -ml-2 bg-white rounded-md overflow-y-auto;
|
||||
min-width: calc(100% + 16px);
|
||||
max-height: 256px;
|
||||
padding: 4px;
|
||||
overflow-y: auto;
|
||||
margin-top: 2px;
|
||||
margin-left: -8px;
|
||||
z-index: 1;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
|
||||
.hide-scroll-bar();
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
> .title-input {
|
||||
@apply w-full px-2 text-base leading-8 rounded border resize-none;
|
||||
@apply w-full py-1 px-2 h-9 text-sm rounded border shadow-inner;
|
||||
}
|
||||
|
||||
> .filters-wrapper {
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
@apply w-full;
|
||||
|
||||
> .create-filter-btn {
|
||||
@apply text-sm leading-8 cursor-pointer text-green-500 hover:text-green-600;
|
||||
@apply text-sm py-1 px-2 rounded shadow flex flex-row justify-start items-center border cursor-pointer text-blue-500 hover:opacity-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -39,32 +39,17 @@
|
|||
.flex(row, flex-start, center);
|
||||
|
||||
> .tip-text {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
margin-right: 8px;
|
||||
@apply text-sm text-gray-400 mr-2;
|
||||
}
|
||||
|
||||
> .btn {
|
||||
padding: 6px 16px;
|
||||
font-size: 13px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: lightgray;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@apply text-base px-4 py-1 leading-7 rounded shadow hover:opacity-80;
|
||||
|
||||
&.save-btn {
|
||||
background-color: @text-green;
|
||||
color: white;
|
||||
@apply bg-green-600 text-white;
|
||||
|
||||
&.requesting {
|
||||
cursor: wait;
|
||||
opacity: 0.8;
|
||||
@apply cursor-wait opacity-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -75,19 +60,10 @@
|
|||
|
||||
.memo-filter-input-wrapper {
|
||||
.flex(row, flex-start, center);
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
@apply w-full mb-3 shrink-0;
|
||||
|
||||
> .selector-wrapper {
|
||||
margin-right: 4px;
|
||||
height: 34px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
@apply mr-1 h-9 grow-0 shrink-0;
|
||||
|
||||
&.relation-selector {
|
||||
@apply w-16;
|
||||
|
|
@ -109,28 +85,10 @@
|
|||
|
||||
> input.value-inputer {
|
||||
max-width: calc(100% - 152px);
|
||||
height: 34px;
|
||||
padding: 0 8px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
margin-right: 4px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid @bg-gray;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: @bg-whitegray;
|
||||
}
|
||||
@apply h-9 px-2 shrink-0 grow mr-1 text-sm rounded border bg-transparent hover:bg-gray-50;
|
||||
}
|
||||
|
||||
> .remove-btn {
|
||||
width: 16px;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
@apply w-4 h-auto cursor-pointer opacity-80 hover:opacity-60;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
.btn {
|
||||
.flex(column, center, center);
|
||||
@apply w-6 h-6 rounded hover:bg-gray-200 hover:shadow;
|
||||
@apply w-6 h-6 rounded hover:bg-gray-100 hover:shadow;
|
||||
|
||||
> .icon-img {
|
||||
@apply w-5 h-5;
|
||||
|
|
|
|||
|
|
@ -5,18 +5,11 @@
|
|||
@apply relative w-full h-auto bg-white;
|
||||
|
||||
> .common-editor-inputer {
|
||||
@apply w-full h-full mt-1 mb-1;
|
||||
@apply w-full h-full mt-1 mb-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent whitespace-pre-wrap;
|
||||
min-height: 40px;
|
||||
max-height: 300px;
|
||||
.pretty-scroll-bar(2px, 0);
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
resize: none;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
background-color: transparent;
|
||||
z-index: 1;
|
||||
white-space: pre-wrap;
|
||||
|
||||
&::placeholder {
|
||||
padding-left: 2px;
|
||||
|
|
@ -30,64 +23,32 @@
|
|||
}
|
||||
|
||||
> .common-tools-wrapper {
|
||||
.flex(row, space-between, center);
|
||||
width: 100%;
|
||||
@apply w-full flex flex-row justify-between items-center;
|
||||
|
||||
> .common-tools-container {
|
||||
.flex(row, flex-start, center);
|
||||
@apply flex flex-row justify-start items-center;
|
||||
|
||||
> .action-btn {
|
||||
width: 18px;
|
||||
height: auto;
|
||||
margin-right: 8px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
@apply p-1 w-7 h-auto mr-1 select-none rounded cursor-pointer opacity-60 hover:opacity-80 hover:bg-gray-300 hover:shadow;
|
||||
}
|
||||
}
|
||||
|
||||
> .btns-container {
|
||||
.flex(row, flex-end, center);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
@apply grow-0 shrink-0 flex flex-row justify-end items-center;
|
||||
|
||||
> .action-btn {
|
||||
border: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 32px;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
@apply border-none select-none cursor-pointer py-1 px-3 rounded text-sm hover:opacity-80;
|
||||
}
|
||||
|
||||
> .cancel-btn {
|
||||
color: gray;
|
||||
background-color: transparent;
|
||||
margin-right: 8px;
|
||||
@apply text-gray-500 bg-transparent mr-2;
|
||||
}
|
||||
|
||||
> .confirm-btn {
|
||||
cursor: pointer;
|
||||
padding: 0 12px;
|
||||
background-color: @text-green;
|
||||
color: white;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
@apply shadow cursor-pointer px-3 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
|
||||
|
||||
> .icon-text {
|
||||
margin-left: 4px;
|
||||
@apply text-base ml-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,7 @@
|
|||
}
|
||||
|
||||
> .tip-text {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: @text-lightgray;
|
||||
@apply text-xs leading-5 text-gray-400;
|
||||
}
|
||||
|
||||
> .memo-editor {
|
||||
|
|
|
|||
|
|
@ -5,21 +5,14 @@
|
|||
|
||||
> .search-bar-inputer {
|
||||
.flex(row, flex-start, center);
|
||||
background-color: @bg-lightgray;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
@apply w-full py-2 px-4 rounded-lg flex flex-row justify-start items-center bg-gray-200;
|
||||
|
||||
> .icon-img {
|
||||
margin-right: 8px;
|
||||
width: 14px;
|
||||
height: auto;
|
||||
opacity: 0.6;
|
||||
@apply mr-2 w-4 h-auto opacity-80;
|
||||
}
|
||||
|
||||
> .text-input {
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
@apply grow text-sm;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -14,14 +14,13 @@
|
|||
}
|
||||
|
||||
> .btns-container {
|
||||
.flex(row, flex-start, center);
|
||||
@apply ml-2 shrink-0;
|
||||
@apply ml-2 shrink-0 flex flex-row justify-start items-center;
|
||||
|
||||
> .btn {
|
||||
@apply text-sm shadow px-4 py-1 leading-6 rounded border hover:opacity-80 bg-gray-50;
|
||||
|
||||
&.cancel-btn {
|
||||
@apply shadow-none bg-transparent;
|
||||
@apply shadow-none border-none bg-transparent;
|
||||
}
|
||||
|
||||
&.confirm-btn {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
> .btn {
|
||||
.flex(column, center, center);
|
||||
@apply w-5 h-5 bg-gray-200 rounded ml-2 hover:opacity-80;
|
||||
@apply w-5 h-5 bg-gray-200 rounded ml-2 shadow hover:opacity-80;
|
||||
|
||||
> img {
|
||||
@apply w-4 h-4 opacity-80;
|
||||
|
|
|
|||
Loading…
Reference in a new issue