Skip to content
Permalink
Browse files

feat: add tailwindcss & update color

  • Loading branch information
EryouHao committed Dec 5, 2019
1 parent 68af24b commit 2013887e5b7e1bdbf03b48dfa92e3b6fe517bd44
@@ -52,6 +52,7 @@ module.exports = {
'no-irregular-whitespace': 0,
'consistent-return': 0,
'import/no-extraneous-dependencies': 0,
'global-require': 0,
},
parserOptions: {
parser: '@typescript-eslint/parser',
@@ -103,6 +103,8 @@
"less-loader": "^4.1.0",
"lint-staged": "^8.1.5",
"markdown-it-task-lists": "^2.1.1",
"postcss-import": "^12.0.1",
"tailwindcss": "^1.1.4",
"typescript": "^3.0.0",
"vue-cli-plugin-electron-builder": "^1.4.0",
"vue-template-compiler": "^2.6.10"
@@ -1,5 +1,7 @@
module.exports = {
plugins: {
autoprefixer: {},
},
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
}
@@ -32,7 +32,7 @@ export default class App extends Vue {
/* Global CSS */
body {
background: #fff;
color: #41464b;
color: #555;
}
::-webkit-scrollbar{
BIN +6.85 KB (150%) src/assets/logo.png
Binary file not shown.
@@ -1,6 +1,6 @@
.ant-table {
background: #fff;
color: #41464b;
color: #555;
}
.ant-table-tbody {
.ant-table-row:nth-of-type(2n) {
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -1,9 +1,11 @@
@primary-color: #41464b;
@primary-bg: #F9F7F3;
@primary-color: #555;
@primary-bg: #f7f6f6;
@danger-color: #fa5252;

@border-radius-base : 2px;
@link-color: #1067de;
@border-color: #e8e8e88a;

@btn-default-border: #eaeaea;
@btn-default-border: #eaeaea;

@label-color: #555;
@@ -6,20 +6,35 @@
>
<div class="top-container">
<div class="logo">
<img class="img" src="@/assets/logo-hey.png">
<img class="img" src="@/assets/logo.png">
</div>
<a-menu mode="inline" :defaultSelectedKeys="['articles']" @click="clickMenu">
<a-menu-item key="articles">
<i class="zwicon-document menu-icon"></i>
<span class="nav-text">{{ $t('article') }}</span>
<div class="menu-item">
<div>
<i class="zwicon-document menu-icon"></i>
<span class="nav-text">{{ $t('article') }}</span>
</div>
<span class="number">{{ site.posts.length }}</span>
</div>
</a-menu-item>
<a-menu-item key="menu">
<i class="zwicon-grid menu-icon"></i>
<span class="nav-text">{{ $t('menu') }}</span>
<div class="menu-item">
<div>
<i class="zwicon-grid menu-icon"></i>
<span class="nav-text">{{ $t('menu') }}</span>
</div>
<span class="number">{{ site.menus.length }}</span>
</div>
</a-menu-item>
<a-menu-item key="tags">
<i class="zwicon-price-tag menu-icon"></i>
<span class="nav-text">{{ $t('tag') }}</span>
<div class="menu-item">
<div>
<i class="zwicon-price-tag menu-icon"></i>
<span class="nav-text">{{ $t('tag') }}</span>
</div>
<span class="number">{{ site.tags.length }}</span>
</div>
</a-menu-item>
<a-menu-item key="theme">
<i class="zwicon-palette menu-icon"></i>
@@ -253,7 +268,11 @@ export default class App extends Vue {
/deep/ .ant-menu {
background: @primary-bg;
color: @primary-color;
@apply text-gray-500;
}
/deep/ .ant-menu-item {
padding-left: 16px !important;
}
/deep/ .ant-menu-vertical .ant-menu-item:after, .ant-menu-vertical-left .ant-menu-item:after, .ant-menu-vertical-right .ant-menu-item:after, .ant-menu-inline .ant-menu-item:after {
@@ -344,6 +363,18 @@ export default class App extends Vue {
}
}
.nav-text {
font-weight: normal;
}
.menu-item {
display: flex;
justify-content: space-between;
.number {
font-weight: lighter;
}
}
.menu-icon {
font-size: 17px;
margin-right: 8px;
@@ -347,12 +347,12 @@ export default {
padding: 0;
}
.editor-toolbar button.active, .editor-toolbar button:hover {
border-color: #41464b;
border-color: #555;
background: #f8d65f;
border-style: dashed;
}
.editor-toolbar button {
color: #41464b !important;
color: #555 !important;
width: 32px;
height: 32px;
border-radius: 2px;
@@ -1,6 +1,7 @@
import Vue from 'vue'
import moment from 'moment'
import Antd from 'ant-design-vue'
import '@/assets/styles/tailwind.css'
import '@/assets/styles/main.less'
import VueI18n from 'vue-i18n'
import Prism from 'prismjs'

0 comments on commit 2013887

Please sign in to comment.
You can’t perform that action at this time.