Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: remove mixin colors #458

Merged
merged 1 commit into from
Nov 13, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 1 addition & 3 deletions web/src/less/change-memo-created-ts-dialog.less
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
@import "./mixin.less";

.change-memo-created-ts-dialog {
> .dialog-container {
@apply w-72;

> .dialog-content-container {
.flex(column, flex-start, flex-start);
@apply flex flex-col justify-start items-start;

> .tip-text {
@apply bg-gray-400 text-xs p-2 rounded-lg;
Expand Down
9 changes: 3 additions & 6 deletions web/src/less/change-password-dialog.less
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
@import "./mixin.less";

.change-password-dialog {
> .dialog-container {
@apply w-72;

> .dialog-content-container {
.flex(column, flex-start, flex-start);
@apply flex flex-col justify-start items-start;

> .tip-text {
@apply bg-gray-400 text-xs p-2 rounded-lg;
}

> .form-label {
.flex(column, flex-start, flex-start);
@apply flex flex-col justify-start items-start;
@apply relative w-full leading-relaxed;

&.input-form-label {
Expand All @@ -25,8 +23,7 @@
}

> .btns-container {
.flex(row, flex-end, center);
@apply mt-2 w-full;
@apply mt-2 w-full flex flex-row justify-end items-center;

> .btn {
@apply text-sm px-4 py-2 rounded ml-2 bg-gray-400;
Expand Down
4 changes: 1 addition & 3 deletions web/src/less/change-resource-filename-dialog.less
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
@import "./mixin.less";

.change-resource-filename-dialog {
> .dialog-container {
@apply w-72;

> .dialog-content-container {
.flex(column, flex-start, flex-start);
@apply flex flex-col justify-start items-start;

> .tip-text {
@apply bg-gray-400 text-xs p-2 rounded-lg;
Expand Down
18 changes: 6 additions & 12 deletions web/src/less/common/date-picker.less
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import "../mixin.less";

.date-picker-wrapper {
@apply flex flex-col justify-start items-start p-4;

Expand All @@ -16,16 +14,15 @@
}

> .date-picker-day-container {
.flex(row, flex-start, flex-start);
@apply flex flex-row justify-start items-start;
width: 280px;
flex-wrap: wrap;

> .date-picker-day-header {
.flex(row, space-around, center);
width: 100%;
@apply flex flex-row justify-around items-center w-full;

> .day-item {
.flex(column, center, center);
@apply flex flex-col justify-center items-center;
width: 36px;
height: 36px;
user-select: none;
Expand All @@ -36,7 +33,7 @@
}

> .day-item {
.flex(column, center, center);
@apply flex flex-col justify-center items-center;
width: 36px;
height: 36px;
border-radius: 50%;
Expand All @@ -46,14 +43,11 @@
margin: 2px;

&:hover {
background-color: @bg-whitegray;
@apply bg-gray-100;
}

&.current {
background-color: @bg-light-blue;
font-size: 16px;
color: @text-blue;
font-weight: bold;
@apply text-blue-600 bg-blue-100 text-base font-medium;
}

&.null {
Expand Down
2 changes: 1 addition & 1 deletion web/src/less/common/selector.less
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
@apply flex flex-col justify-start items-start w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100;

&.selected {
color: @text-green;
@apply text-green-600;
}
}

Expand Down
22 changes: 8 additions & 14 deletions web/src/less/create-shortcut-dialog.less
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
@import "./mixin.less";

.create-shortcut-dialog {
@apply px-4;

> .dialog-container {
@apply w-128 max-w-full;

> .dialog-content-container {
.flex(column, flex-start, flex-start);
@apply flex flex-col justify-start items-start;

> .form-item-container {
.flex(row, flex-start, flex-start);
@apply w-full mt-2 py-1;
@apply w-full mt-2 py-1 flex flex-row justify-start items-start;

> .normal-text {
@apply block flex-shrink-0 w-12 mr-3 text-right text-sm leading-8;
Expand All @@ -23,8 +20,7 @@
}

> .filters-wrapper {
.flex(column, flex-start, flex-start);
@apply w-full;
@apply w-full flex flex-col justify-start items-start;

> .create-filter-btn {
@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;
Expand All @@ -34,11 +30,10 @@
}

> .dialog-footer-container {
.flex(row, space-between, center);
@apply w-full mt-0;
@apply w-full mt-0 flex flex-row justify-between items-center;

> .btns-container {
.flex(row, flex-start, center);
@apply flex flex-row justify-start items-center;

> .tip-text {
@apply text-sm text-gray-400 mr-2;
Expand All @@ -61,8 +56,7 @@
}

.memo-filter-input-wrapper {
.flex(row, flex-start, center);
@apply w-full mb-3 shrink-0;
@apply w-full mb-3 shrink-0 flex flex-row justify-start items-center;

> .selector-wrapper {
@apply mr-1 h-9 grow-0 shrink-0;
Expand All @@ -81,7 +75,7 @@
}

&.value-selector {
@apply grow;
@apply grow;
}
}

Expand All @@ -90,7 +84,7 @@
@apply h-9 px-2 shrink-0 grow mr-1 text-sm rounded border bg-transparent hover:bg-gray-50;
}

> input.datetime-selector{
> input.datetime-selector {
max-width: calc(100% - 152px);
@apply h-9 px-2 shrink-0 grow mr-1 text-sm rounded border bg-transparent hover:bg-gray-50;
}
Expand Down
14 changes: 5 additions & 9 deletions web/src/less/memo-card-dialog.less
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import "./mixin.less";

.dialog-wrapper.memo-card-dialog {
@apply px-4;

Expand All @@ -21,11 +19,10 @@
}

> .btns-container {
.flex(row, flex-end, center);
@apply flex flex-row justify-end items-center;

> .btn {
.flex(row, center, center);
@apply w-6 h-6 p-1 ml-2 rounded text-gray-600 hover:bg-white;
@apply flex flex-row justify-center items-center w-6 h-6 p-1 ml-2 rounded text-gray-600 hover:bg-white;
}

> .split-line {
Expand All @@ -44,20 +41,20 @@

> .layer-container,
> .background-layer-container {
@apply bg-amber-100;
position: absolute;
bottom: -3px;
left: 3px;
width: calc(100% - 6px);
height: 100%;
border-radius: 8px;
z-index: -1;
background-color: @bg-paper-yellow;
border-bottom: 1px solid lightgray;
}

> .layer-container {
@apply bg-amber-100;
z-index: 0;
background-color: @bg-paper-yellow;
border: 1px solid lightgray;
width: 100%;
height: 100%;
Expand All @@ -68,8 +65,7 @@
}

> .linked-memos-wrapper {
.flex(column, flex-start, flex-start);
@apply w-128 max-w-full mt-2 py-3 px-6 rounded-lg bg-white last:mb-8;
@apply flex flex-col justify-start items-start w-128 max-w-full mt-2 py-3 px-6 rounded-lg bg-white last:mb-8;

> .normal-text {
@apply text-sm;
Expand Down
4 changes: 1 addition & 3 deletions web/src/less/memo-editor.less
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import "./mixin.less";

.memo-editor-container {
@apply transition-all relative w-full flex flex-col justify-start items-start bg-white px-4 rounded-lg border-2 border-gray-200;

Expand Down Expand Up @@ -121,7 +119,7 @@
}

> .editor-footer-container {
@apply w-full flex flex-row justify-between items-center border-t py-3 mt-2;
@apply w-full flex flex-row justify-between items-center border-t border-t-gray-100 py-3 mt-2;

> .visibility-selector {
@apply h-8;
Expand Down
5 changes: 1 addition & 4 deletions web/src/less/memo-filter.less
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
@import "./mixin.less";

.filter-query-container {
.flex(row, flex-start, flex-start);
@apply w-full flex-wrap p-2 pb-1 text-sm font-mono leading-7;
@apply flex flex-row justify-start items-start w-full flex-wrap p-2 pb-1 text-sm font-mono leading-7;

> .tip-text {
@apply mr-2;
Expand Down
24 changes: 0 additions & 24 deletions web/src/less/mixin.less
Original file line number Diff line number Diff line change
@@ -1,20 +1,3 @@
@text-black: #37352f;
@text-gray: #52504b;
@text-lightgray: #cac8c4;
@text-blue: #5783f7;
@text-green: #55bb8e;
@text-red: #d28653;

@bg-black: #2f3437;
@bg-gray: #e4e4e4;
@bg-whitegray: #f8f8f8;
@bg-lightgray: #eaeaea;
@bg-blue: #1337a3;
@bg-yellow: yellow;
@bg-red: #fcf0f0;
@bg-light-blue: #eef3fe;
@bg-paper-yellow: #fbf4de;

.hide-scroll-bar {
.pretty-scroll-bar(0, 0);

Expand Down Expand Up @@ -43,10 +26,3 @@
}
}
}

.flex(@direction, @justify, @align) {
display: flex;
flex-direction: @direction;
justify-content: @justify;
align-items: @align;
}
3 changes: 1 addition & 2 deletions web/src/less/tag-list.less
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@
@apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2 mt-1;

.subtags-container {
@apply flex flex-col justify-start items-start h-auto mt-1 ml-5 pl-1;
@apply flex flex-col justify-start items-start h-auto mt-1 ml-5 pl-1 border-l-2 border-l-gray-200;
width: calc(100% - 18px);
min-width: 80px;
border-left: 2px solid @bg-gray;

> .tag-item-container {
@apply first:mt-0;
Expand Down