Skip to content

C
canifa_note
Unverified Commit cb50bbc3 authored by boojack's avatar boojack Committed by GitHub
Browse files
Options

refactor: remove mixin colors (#458)

parent 2743268f
Show whitespace changes
Inline Side-by-side
Showing with 28 additions and 81 deletions
web/src/less/change-memo-created-ts-dialog.less
View file @ cb50bbc3
@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;
......
web/src/less/change-password-dialog.less
View file @ cb50bbc3
@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 {
......@@ -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;
......
web/src/less/change-resource-filename-dialog.less
View file @ cb50bbc3
@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;
......
web/src/less/common/date-picker.less
View file @ cb50bbc3
@import "../mixin.less";
.date-picker-wrapper {
@apply flex flex-col justify-start items-start p-4;
......@@ -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;
......@@ -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%;
......@@ -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 {
......
web/src/less/common/selector.less
View file @ cb50bbc3
......@@ -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;
}
}
......
web/src/less/create-shortcut-dialog.less
View file @ cb50bbc3
@import "./mixin.less";
.create-shortcut-dialog {
@apply px-4;
......@@ -7,11 +5,10 @@
@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;
......@@ -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;
......@@ -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;
......@@ -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;
......@@ -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;
}
......
web/src/less/memo-card-dialog.less
View file @ cb50bbc3
@import "./mixin.less";
.dialog-wrapper.memo-card-dialog {
@apply px-4;
......@@ -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 {
......@@ -44,6 +41,7 @@
> .layer-container,
> .background-layer-container {
@apply bg-amber-100;
position: absolute;
bottom: -3px;
left: 3px;
......@@ -51,13 +49,12 @@
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%;
......@@ -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;
......
web/src/less/memo-editor.less
View file @ cb50bbc3
@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;
......@@ -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;
......
web/src/less/memo-filter.less
View file @ cb50bbc3
@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;
......
web/src/less/mixin.less
View file @ cb50bbc3
@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);
......@@ -43,10 +26,3 @@
}
}
}
.flex(@direction, @justify, @align) {
display: flex;
flex-direction: @direction;
justify-content: @justify;
align-items: @align;
}
web/src/less/tag-list.less
View file @ cb50bbc3
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment